[css-color-4] swatch all the things

Author: svgeesus

css-color-4/Overview.bs

@@ -903,33 +903,33 @@ System Colors</h3>
 
 	<dl id="system-color-values" data-dfn-type="value" dfn-for="<system-color>">
 		<dt><dfn>Canvas</dfn>
-		<dd>Background of application content or documents.
+		<dd><span class="swatch" style="--color: canvas"></span>&nbsp;Background of application content or documents.
 		<dt><dfn>CanvasText</dfn>
-		<dd>Text in application content or documents.
+		<dd><span class="swatch" style="--color: canvastext"></span>&nbsp;Text in application content or documents.
 		<dt><dfn>LinkText</dfn>
-		<dd>Text in non-active, non-visited links.
+		<dd><span class="swatch" style="--color: linktext"></span>&nbsp;Text in non-active, non-visited links.
 		<dt><dfn>VisitedText</dfn>
-		<dd>Text in visited links.
+		<dd><span class="swatch" style="--color: visitedtext"></span>&nbsp;Text in visited links.
 		<dt><dfn>ActiveText</dfn>
-		<dd>Text in active links.
+		<dd><span class="swatch" style="--color: activetext"></span>&nbsp;Text in active links.
 
 		<dt><dfn>ButtonFace</dfn>
-		<dd>The face background color for push buttons.
+		<dd><span class="swatch" style="--color: buttonface"></span>&nbsp;The face background color for push buttons.
 		<dt><dfn>ButtonText</dfn>
-		<dd>Text on push buttons.
+		<dd><span class="swatch" style="--color: buttontext"></span>&nbsp;Text on push buttons.
 
 		<dt><dfn>Field</dfn>
-		<dd>Background of input fields.
+		<dd><span class="swatch" style="--color: field"></span>&nbsp;Background of input fields.
 		<dt><dfn>FieldText</dfn>
-		<dd>Text in input fields.
+		<dd><span class="swatch" style="--color: fieldtext"></span>&nbsp;Text in input fields.
 
 		<dt><dfn>Highlight</dfn>
-		<dd>Background of item(s) selected in a control.
+		<dd><span class="swatch" style="--color: highlight"></span>&nbsp;Background of item(s) selected in a control.
 		<dt><dfn>HighlightText</dfn>
-		<dd>Text of item(s) selected in a control.
+		<dd><span class="swatch" style="--color: highlighttext"></span>&nbsp;Text of item(s) selected in a control.
 
 		<dt><dfn>GrayText</dfn>
-		<dd>Disabled text.
+		<dd><span class="swatch" style="--color: graytext"></span>&nbsp;Disabled text.
 			(Often, but not necessarily, gray.)
 	</dl>
 
@@ -977,17 +977,17 @@ The ''<color>/currentcolor'' keyword</h3>
 
 		<pre class="lang-css">
 		.foo {
-			color: red;
-			background-color: currentcolor;
+			color: <span class="swatch" style="--color: red"></span>&nbsp;red;
+			background-color: <span class="swatch" style="--color: red"></span>&nbsp;currentcolor;
 		}
 		</pre>
 
 		This is equivalent to writing:
 
 		<pre class="lang-css">
 		.foo {
-			color: red;
-			background-color: red;
+			color: <span class="swatch" style="--color: red"></span>&nbsp;red;
+			background-color: <span class="swatch" style="--color: red"></span>&nbsp;red;
 		}
 		</pre>
 	</div>