[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 <[email protected]>

Author: LeaVerou

css-color-6/Overview.bs

@@ -63,17 +63,28 @@ Computing a Contrasting Color: the ''contrast-color()'' function {#colorcontrast
 	Its syntax is:
 
 	
-		<> = contrast-color( <> [[ vs <># ]? to <>]? )
+		<> = contrast-color(
+		  [ [ <> && [ tbd-fg | tbd-bg ] && <>? ] |
+		    [ <> && [ tbd-fg | tbd-bg ] && <>, <># ] )
 		<> = <>
 	
 
 	The only mandatory argument is the base color
 	against which the contrast is computed.
 	This is typically (but not necessarily) a background color.
 
-	An optional list of contrast color candidates may be provided after a ''vs'' keyword.
+	The optional list of <> values represents
+	the color candidates.
 	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 (text)
+	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 TBD.
+
 	The <> argument specifies the contrast algorithm to use.
 	If no [=color candidates=] have been provided,
 	<> may be omitted,
@@ -113,7 +124,7 @@ If there is a target contrast
 		https://colorjs.io/notebook/?storage=https%3A%2F%2Fgist.github.com%2Fsvgeesus%2Fec249f376fcecbaa8794f75dbfc1dacf
 	-->
 
-		contrast-color(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to wcag2(aa))
+		contrast-color(wheat tbd-bg wcag2(aa), bisque, darkgoldenrod, olive, sienna, darkgreen, maroon)
 
 		The calculation is as follows:
 			*  wheat (#f5deb3), the background, has relative luminance 0.749
@@ -128,7 +139,7 @@ If there is a target contrast
 	
 
 
-		contrast-color(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to wcag2(5.8))
+		contrast-color(wheat tbd-bg wcag2(5.8), bisque, darkgoldenrod, olive, sienna, darkgreen, maroon)
 
 		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
 	
 
 
-		contrast-color(wheat vs bisque, darkgoldenrod, olive to wcag2(AA))
+		contrast-color(wheat tbd-bg wcag2(AA), bisque, darkgoldenrod, olive)
 
 		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
 
 		
 			--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)
 		
 
 		The calculation is as follows:
@@ -182,7 +193,7 @@ If no target contrast is specified
 			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));
 			}
 		
 
@@ -290,7 +301,7 @@ If no target contrast is specified
 			For example, given the value
 
 			
-				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%))
 			
 
 			the contrast with cadetblue is 1.97
@@ -311,13 +322,13 @@ If no target contrast is specified
 			the value
 
 			
-				contrast-color(currentColor vs hsl(200 83% 23%), purple to wcag2(AA))
+				contrast-color(currentColor tbd-bg wcag2(AA), hsl(200 83% 23%), purple)
 			
 
 			has the computed value
 
 			
-				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))
 			
 
 		
@@ -401,14 +412,14 @@ is the same as that specified in
 
 
 	The winner of this contrast choice
-	contrast-color(wheat vs olive, sienna, maroon)
+	contrast-color(wheat tbd-bg wcag2, olive, sienna, maroon)
 	is maroon,
 	so the result is serialized as
 	
 	"rgb(128 0 0)".
 
 	While the winner of
-	contrast-color(wheat vs color(prophoto-rgb 0.4 0.4 0.2), color(display-p3 0.45 0.08 0.05))
+	contrast-color(wheat tbd-bg wcag2, color(prophoto-rgb 0.4 0.4 0.2), color(display-p3 0.45 0.08 0.05))
 	is color(display-p3 0.45 0.08 0.05),
 	so the result is serialized as