[css-color-6] Rename color-contrast() to contrast-color(), closes w3c#7557

Author: LeaVerou

css-color-6/Overview.bs

@@ -35,7 +35,7 @@ Introduction {#intro}
 	<em>This section is not normative.</em>
 
 	This module adds two one function:
-	''color-contrast()''.
+	''contrast-color()''.
 
 
 
@@ -52,7 +52,7 @@ Introduction {#intro}
 	https://caniuse.com/mdn-css_types_color_color-contrast
 -->
 
-Selecting the most contrasting color: the ''color-contrast()'' function {#colorcontrast}
+Selecting the most contrasting color: the ''contrast-color()'' function {#colorcontrast}
 ========================================================================================
 
 	This function takes, firstly, a single color
@@ -71,13 +71,13 @@ Selecting the most contrasting color: the ''color-contrast()'' function {#colorc
 	with the keyword <css>to</css>.
 
 	<pre class='prod'>
-		<dfn>color-contrast()</dfn> = color-contrast( <<color>> vs <<color>>#{2,}  [ to [<<number>> | AA | AA-large | AAA | AAA-large]]? )
+		<dfn>contrast-color()</dfn> = contrast-color( <<color>> vs <<color>>#{2,}  [ to [<<number>> | AA | AA-large | AAA | AAA-large]]? )
 	</pre>
 
-	The keyword <dfn value for="color-contrast()">AA</dfn> is equivalent to ''4.5'',
-	 <dfn value for="color-contrast()">AA-large</dfn> is equivalent to ''3'',
-	 <dfn value for="color-contrast()">AAA</dfn> is equivalent to ''7'', and
-	 <dfn value for="color-contrast()">AAA-large</dfn> is equivalent to ''4.5'' .
+	The keyword <dfn value for="contrast-color()">AA</dfn> is equivalent to ''4.5'',
+	 <dfn value for="contrast-color()">AA-large</dfn> is equivalent to ''3'',
+	 <dfn value for="contrast-color()">AAA</dfn> is equivalent to ''7'', and
+	 <dfn value for="contrast-color()">AAA-large</dfn> is equivalent to ''4.5'' .
 
 <h3 id="luminance-contrast">
 	Calculating luminance and WCAG 2.1 contrast
@@ -129,7 +129,7 @@ Selecting the most contrasting color: the ''color-contrast()'' function {#colorc
 	-->
 
 	<div class="example">
-		<pre class="lang-css">color-contrast(wheat vs tan, sienna, var(--myAccent), #d2691e)</pre>
+		<pre class="lang-css">contrast-color(wheat vs tan, sienna, var(--myAccent), #d2691e)</pre>
 
 		The calculation is as follows:
 			* <span class="swatch" style="--color: wheat"></span> wheat (#f5deb3), the background, has relative luminance 0.749
@@ -147,7 +147,7 @@ Selecting the most contrasting color: the ''color-contrast()'' function {#colorc
 		https://colorjs.io/notebook/?storage=https%3A%2F%2Fgist.github.com%2Fsvgeesus%2Fec249f376fcecbaa8794f75dbfc1dacf
 	-->
 	<div class="example">
-		<pre class="lang-css">color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to AA)</pre>
+		<pre class="lang-css">contrast-color(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to AA)</pre>
 
 		The calculation is as follows:
 			* <span class="swatch" style="--color: wheat"></span> wheat (#f5deb3), the background, has relative luminance 0.749
@@ -164,7 +164,7 @@ Selecting the most contrasting color: the ''color-contrast()'' function {#colorc
 	</div>
 
 	<div class="example">
-		<pre class="lang-css">color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to 5.8)</pre>
+		<pre class="lang-css">contrast-color(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to 5.8)</pre>
 
 		The calculation is as follows:
 			* the relative luminances and contrast ratios are the same as the previous example.
@@ -192,7 +192,7 @@ Selecting the most contrasting color: the ''color-contrast()'' function {#colorc
 	whichever has the higher contrast.
 
 	<div class="example">
-		<pre class="lang-css">color-contrast(wheat vs bisque, darkgoldenrod, olive to AA)</pre>
+		<pre class="lang-css">contrast-color(wheat vs bisque, darkgoldenrod, olive to AA)</pre>
 
 		The calculation is as follows:
 			* the relative luminances and contrast ratios are the same as the previous example.
@@ -209,7 +209,7 @@ Selecting the most contrasting color: the ''color-contrast()'' function {#colorc
 			foo {
 				--bg: hsl(200 50% 80%);
 				--purple-in-hsl: hsl(300 100% 25%);
-				color: color-contrast(var(--bg) vs hsl(200 83% 23%), purple, var(--purple-in-hsl));
+				color: contrast-color(var(--bg) vs hsl(200 83% 23%), purple, var(--purple-in-hsl));
 			  }
 		</pre>
 
@@ -239,14 +239,14 @@ Selecting the most contrasting color: the ''color-contrast()'' function {#colorc
 <h2 id='resolving-color-values'>
 	Resolving <<color>> Values</h2>
 
-		<h3 id="resolving-contrast">Resolving ''color-contrast()'' values</h3>
+		<h3 id="resolving-contrast">Resolving ''contrast-color()'' values</h3>
 
 		If all <<color>> parameters resolve
 		to the corresponding colors in their respective color spaces,
 		the computed value is the winning color
 		resolved according to [[css-color-4#resolving-color-values]].
 		Otherwise (if ''currentColor'' was used in the function),
-		the computed  value is the ''color-contrast()'' function
+		the computed  value is the ''contrast-color()'' function
 		with each <<color>> parameter resolved according to [[css-color-4#resolving-color-values]],
 		and the keywords ''AA'', ''AA-large'', ''AAA'', ''AAA-large'' replaced with their corresponding numeric value,
 		thus preserving inheritance into child elements.
@@ -255,7 +255,7 @@ Selecting the most contrasting color: the ''color-contrast()'' function {#colorc
 			For example, given the value
 
 			<pre class="lang-css">
-				color-contrast(rgb(179 213 230) vs cadetblue, hsl(200 83% 23%) to AA)
+				contrast-color(rgb(179 213 230) vs cadetblue, hsl(200 83% 23%) to AA)
 			</pre>
 
 			the contrast with cadetblue is <strong>1.97</strong>
@@ -276,13 +276,13 @@ Selecting the most contrasting color: the ''color-contrast()'' function {#colorc
 			the value
 
 			<pre class="lang-css">
-				color-contrast(currentColor vs hsl(200 83% 23%), purple to AA)
+				contrast-color(currentColor vs hsl(200 83% 23%), purple to AA)
 			</pre>
 
 			has the computed value
 
 			<pre class="lang-css">
-				color-contrast(currentColor vs rgb(10 75 107), rgb(128 0 128) to 4.5)
+				contrast-color(currentColor vs rgb(10 75 107), rgb(128 0 128) to 4.5)
 			</pre>
 
 		</div>
@@ -304,7 +304,7 @@ Serialization {#serial}
 This section extends [[css-color-4#serializing-color-values]]
 to add serialization of the
 results of the
-''color-contrast()'' function.
+''contrast-color()'' function.
 
 In this section, the strings used in the specification and the corresponding characters are as follows.
 
@@ -344,10 +344,10 @@ if the alpha of the result is exactly 1,
 it is omitted from the serialization;
 an implicit value of 1 (fully opaque) is the default.
 
-Serializing color-contrast() {#serial-color-contrast}
+Serializing contrast-color() {#serial-contrast-color}
 -----------------------------------------------------
 
-The serialization of the result of a ''color-contrast()'' function
+The serialization of the result of a ''contrast-color()'' function
 is a <<color>>,
 as defined in [[css-color-4#serializing-color-values]].
 The form used
@@ -366,14 +366,14 @@ is the same as that specified in
 
 <div class="example">
 	The winner of this contrast choice
-	<pre>color-contrast(wheat vs olive, sienna, maroon)</pre>
+	<pre>contrast-color(wheat vs olive, sienna, maroon)</pre>
 	is maroon,
 	so the result is serialized as
 	<span class="swatch" style="--color: maroon"></span>
 	"rgb(128 0 0)".
 
 	While the winner of
-	<pre>color-contrast(wheat vs color(prophoto-rgb 0.4 0.4 0.2), color(display-p3 0.45 0.08 0.05))</pre>
+	<pre>contrast-color(wheat vs color(prophoto-rgb 0.4 0.4 0.2), color(display-p3 0.45 0.08 0.05))</pre>
 	is color(display-p3 0.45 0.08 0.05),
 	so the result is serialized as
 	<span class="swatch" style="--color: rgb(49.277% 0.414% 0.524%)"></span>
@@ -425,7 +425,7 @@ Changes {#changes}
 <h3 id='changes-from-5'>
 	Changes from Colors 5</h3>
 
-		The new ''color-contrast()'' function allows one of a list of colors to be chosen,
+		The new ''contrast-color()'' function allows one of a list of colors to be chosen,
 		based on the WCAG 2.1 contrast with a specified color.
 
 <!--