[css-color-6] Change syntax per NYC F2F resolutions #7359

- Dropped `to` and `vs` keywords
- Moved algorithm to prelude
- Added tbd keywords to distinguish foreground and background

Co-Authored-By: fantasai <725717+fantasai@users.noreply.github.com>

Author: LeaVerou

css-color-6/Overview.bs

@@ -63,17 +63,28 @@ Computing a Contrasting Color: the ''contrast-color()'' function {#colorcontrast
 	Its syntax is:
 
 	<pre class='prod'>
-		<<contrast-color()>> = contrast-color( <<color>> [[ vs <<color>># ]? to <<target-contrast>>]? )
+		<<contrast-color()>> = contrast-color(
+		  [ [ <<color>> && [ tbd-fg | tbd-bg ] && <<target-contrast>>? ] |
+		    [ <<color>> && [ tbd-fg | tbd-bg ] && <<target-contrast>>, <<color>># ] )
 		<<target-contrast>> = <<wcag2>>
 	</pre>
 
 	The only mandatory argument is the <dfn lt="contrast base color" local-lt="base color">base color</dfn>
 	against which the contrast is computed.
 	This is typically (but not necessarily) a background color.
 
-	An optional list of <dfn local-lt="color candidates">contrast color candidates</dfn> may be provided after a ''vs'' keyword.
+	The optional list of <<color>> values represents
+	the <dfn lt="contrast color candidates" local-lt="color candidates">color candidates</dfn>.
 	If no candidates are provided, the default candidates are used: ''white, black''.
 
+	The ''tbd-fg'' and ''tbd-bg'' keywords
+	indicate the role of the [=base color=] in calculating the contrast:
+	as text against a list of [=color candidate|candidate=] background colors (<dfn for="contrast-color()" value>text</dfn>)
+	or as a background against a list of [=color candidate|candidate=] text colors.
+	(The effective contrast of a pair of colors depends on their usage.)
+
+	ISSUE (#7359): The keywords to specify whether the [=base color=] is a foreground or background are <abbr title="to be decided">TBD</abbr>.
+
 	The <dfn><<target-contrast>></dfn> argument specifies the contrast algorithm to use.
 	If no [=color candidates=] have been provided,
 	<<target-contrast>> may be omitted,
@@ -113,7 +124,7 @@ If there is a target contrast</h4>
 		https://colorjs.io/notebook/?storage=https%3A%2F%2Fgist.github.com%2Fsvgeesus%2Fec249f376fcecbaa8794f75dbfc1dacf
 	-->
 	<div class="example">
-		<pre class="lang-css">contrast-color(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to wcag2(aa))</pre>
+		<pre class="lang-css">contrast-color(wheat tbd-bg wcag2(aa), bisque, darkgoldenrod, olive, sienna, darkgreen, maroon)</pre>
 
 		The calculation is as follows:
 			* <span class="swatch" style="--color: wheat"></span> wheat (#f5deb3), the background, has relative luminance 0.749
@@ -128,7 +139,7 @@ If there is a target contrast</h4>
 	</div>
 
 	<div class="example">
-		<pre class="lang-css">contrast-color(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to wcag2(5.8))</pre>
+		<pre class="lang-css">contrast-color(wheat tbd-bg wcag2(5.8), bisque, darkgoldenrod, olive, sienna, darkgreen, maroon)</pre>
 
 		The calculation is as follows:
 			* the relative luminances and contrast ratios are the same as the previous example.
@@ -137,7 +148,7 @@ If there is a target contrast</h4>
 	</div>
 
 	<div class="example">
-		<pre class="lang-css">contrast-color(wheat vs bisque, darkgoldenrod, olive to wcag2(AA))</pre>
+		<pre class="lang-css">contrast-color(wheat tbd-bg wcag2(AA), bisque, darkgoldenrod, olive)</pre>
 
 		The calculation is as follows:
 			* the relative luminances and contrast ratios are the same as the previous example.
@@ -164,7 +175,7 @@ If no target contrast is specified</h4>
 	<div class="example">
 		<pre class="lang-css">
 			--myAccent: #b22222;
-			color: contrast-color(wheat vs tan, sienna, var(--myAccent), #d2691e to wcag2)
+			color: contrast-color(wheat tbd-bg wcag2, tan, sienna, var(--myAccent), #d2691e)
 		</pre>
 
 		The calculation is as follows:
@@ -182,7 +193,7 @@ If no target contrast is specified</h4>
 			foo {
 				--bg: hsl(200 50% 80%);
 				--purple-in-hsl: hsl(300 100% 25%);
-				color: contrast-color(var(--bg) vs hsl(200 83% 23%), purple, var(--purple-in-hsl) to wcag2);
+				color: contrast-color(var(--bg) tbd-fg wcag2, hsl(200 83% 23%), purple, var(--purple-in-hsl));
 			}
 		</pre>
 
@@ -290,7 +301,7 @@ If no target contrast is specified</h4>
 			For example, given the value
 
 			<pre class="lang-css">
-				contrast-color(rgb(179 213 230) vs cadetblue, hsl(200 83% 23%) to wcag2(AA))
+				contrast-color(rgb(179 213 230) tbd-bg wcag2(AA), cadetblue, hsl(200 83% 23%))
 			</pre>
 
 			the contrast with cadetblue is <strong>1.97</strong>
@@ -311,13 +322,13 @@ If no target contrast is specified</h4>
 			the value
 
 			<pre class="lang-css">
-				contrast-color(currentColor vs hsl(200 83% 23%), purple to wcag2(AA))
+				contrast-color(currentColor tbd-bg wcag2(AA), hsl(200 83% 23%), purple)
 			</pre>
 
 			has the computed value
 
 			<pre class="lang-css">
-				contrast-color(currentColor vs rgb(10 75 107), rgb(128 0 128) to wcag2(4.5))
+				contrast-color(currentColor tbd-bg wcag2(4.5), rgb(10 75 107), rgb(128 0 128))
 			</pre>
 
 		</div>
@@ -401,14 +412,14 @@ is the same as that specified in
 
 <div class="example">
 	The winner of this contrast choice
-	<pre>contrast-color(wheat vs olive, sienna, maroon)</pre>
+	<pre>contrast-color(wheat tbd-bg wcag2, 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>contrast-color(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 tbd-bg wcag2, 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>