[css-color-5] Improve swatches

Author: LeaVerou

css-color-5/Overview.bs

@@ -21,9 +21,15 @@ spec:css-color-4; type:dfn; text:gamut
 </pre>
 
 <style>
-	.swatch {display: inline-block; height: 1.2em; width: 1.2em;}
-	.peru {background-color: peru;}
-	.darkperu {background-color: rgb(57.58%, 32.47%, 3.82%);}
+	.swatch {
+		display: inline-block;
+		vertical-align: calc(-.1em - 3px);
+		padding: .6em;
+		background-color: var(--color);
+		border: 3px solid white;
+		border-radius: 3px;
+		box-shadow: 1px 1px 1px rgba(0,0,0,.15)
+	}
 </style>
 
 Introduction {#intro}
@@ -223,10 +229,10 @@ Adjusting colors: the ''color-adjust'' function {#coloradjust}
 		<pre class="lang-css">adjust-color(peru, lightness(-20%));</pre>
 
 		The calculation is as follows:
-		* peru (#CD853F) <span class="swatch peru"> </span> is lch(62.2532% 54.0114 63.6769)
+		* <span class="swatch" style="--color: peru"></span> peru (#CD853F) is lch(62.2532% 54.0114 63.6769)
 		* adjusted lightness is 62.2532% - 20% = 42.2532%
 		* adjusted result is lch(42.2532% 54.0114 63.6769)
-		* which is rgb(57.58%, 32.47%, 3.82%) <span class="swatch darkperu"> </span>
+		* which is <span class="swatch" style="--color: rgb(57.58%, 32.47%, 3.82%)"></span> rgb(57.58%, 32.47%, 3.82%)
 	</div>
 
 <img src="images/adjust_red_lightness30.png" alt="Result of adjust-color(red, lightness(30%)" />