Added image form of light-dark() and examples, fixes #12513 (#13651)

* Added image form of light-dark() and examples, #12513

* [css-color-5][editorial] Add wpt to silence bikeshed warning which prevents publication

Author: svgeesus

css-color-5/Overview.bs

@@ -2764,15 +2764,67 @@ or any other color or monochrome output device which has been characterized.
 	System colors have the ability to react to the current used ''color-scheme'' value.
 	The ''light-dark()'' function exposes the same capability to authors.
 
+	There are two forms of this function: one takes a pair of colors
+	while the other takes a pair of images. 
+
 	<pre class='prod'>
-		<dfn export>light-dark()</dfn> = light-dark( <<color>>, <<color>> )
+		<dfn export>light-dark()</dfn> =  light-dark( [<<color>>, <<color>>] | [<<image>>, <<image>>])
 	</pre>
 
-	This function computes to the computed value of the first color,
+	For the color form, this function computes to the computed value of the first color,
 	if the <a>used color scheme</a> is ''light'' or unknown,
 	or to the computed value of the second color,
 	if the <a>used color scheme</a> is ''dark''.
 
+	For the image form, this function returns the first image,
+	if the <a>used color scheme</a> is ''light'' or unknown,
+	or the second image,
+	if the <a>used color scheme</a> is ''dark''.
+
+	<div class="example" id="ex-light-dark-color">
+		For example, to maintain a legible contrast on links,
+		for light mode and dark mode:
+
+		<pre class="lang-css">
+			a:link {
+			    color: light-dark(blue, #81D9FE);
+			    background-color: light-dark(white, black);
+		}
+		</pre>
+
+		The traditional <span class="swatch" style="--color: blue"></span> blue link text 
+		is legible on a <span class="swatch" style="--color: #fff"></span> white background
+		(WCAG contrast 8.59:1, AAA pass)
+		but would not be legible on a <span class="swatch" style="--color: #000"></span> black background
+		(WCAG contrast 2.44:1, AA fail).
+		Instead, a lighter blue <span class="swatch" style="--color: #81D9FE"></span> #81D9FE 
+		is used in dark mode.
+		(WCAG contrast 13.28:1, AAA pass).
+
+			<div style="margin:1em; margin-left: 2em; text-decoration: underline; background: inherit">
+			<p style="padding: 4px; background-color: white; color: blue"> Legible link text</p>
+			<p style="padding: 4px; background-color: black; color: blue"> Illegible link text</p>
+			<p style="padding: 4px; background-color: black; color: #81D9FE"> Legible link text</p>
+			</div>
+		</div>
+
+		<div class="example" id="ex-light-dark-image">
+			For example, to provide easily visible list bullets
+			for light mode and dark mode:
+
+			<pre class="lang-css">
+			ul.fancy {
+			    list-style-image: light-dark(
+					url("icons/deep-maroon-ball.png"),
+					url("icons/pale-yellow-star.png")
+				);
+			}
+		</pre>
+
+		</div>
+
+	
+
 	<wpt>
 		light-dark-basic.html
 		light-dark-currentcolor.html
@@ -2819,6 +2871,7 @@ or any other color or monochrome output device which has been characterized.
 	<wpt>
 		contrast-color-001.html
 		contrast-color-currentcolor-inherited.html
+		animation/contrast-color-interpolation.html
 		parsing/color-computed-contrast-color-function.html
 		parsing/color-invalid-contrast-color-function.html
 		parsing/color-valid-contrast-color-function.html