[css-scrollbars] Scrollbars don't have to be flat

Add note and example highlighting that there can be variation in the
design of scrollbars, including, but not limited to flat designs.

Related to w3c#9851

Author: frivoal

css-scrollbars-1/Overview.bs

@@ -217,6 +217,42 @@ Value Definitions</h3>
 	The provision above allows the UA to replace them with differently-constructed scrollbars,
 	which it does know how to color.
 
+	Note: User Agents are expected to use the color
+	in the rendering of the scrollbar,
+	but that does not imply they need to paid the entire thumb or track
+	with a single solid featureless color.
+	The specified color can be used as a tint for part of the component,
+	lighter or darker shades of the color can be used for highlights, shadows, texture…
+
+	<div class=example id=non-flat>
+		The following image represents a possible rendition of a scrollbar
+		given the following css:
+		<pre><code highlight=css>scrollbar-color: #8eb0dc #d2d4d6;</code></pre>
+		This specific design is not only that single shade of blue over that single shade of gray:
+		the [=thumb=] has a subtle vertical gradient
+		going from a lighter shade at the top to a slightly darker shade at the bottom,
+		darker notches in the middle,
+		as well as a darker outline,
+		all derived from the specified shade of blue;
+		the light gray [=track=] has a darker outline.
+
+		<img src="images/non-flat-bar.png"
+			alt="A horizontal scrollbar with a textured, shaded and outlined blue thumb,
+			over a light gray track which is itself outlined,
+			and flanked by two 'scroll left' and 'scroll right' buttons,
+			as was commonly seen in scrollbar designs of the early 2000s">
+
+		Nevertheless, authors cannot assume that this will necessarily be the case,
+		as on a different platform or a different user agent
+		the rendering could be a solid color [=thumb=] over a solid color [=track=],
+		as seen below.
+
+		<img src="images/flat-bar.png"
+			alt="A horizontal scrollbar with a blue featureless rounded rectangle as a thumb
+			over a featureless light gray track,
+			as was commonly seen in scrollbar designs of the early 2020s">
+	</div>
+
 	Issue: add diagram showing the different named pieces - something like
 	<a href="http://www.howtocreate.co.uk/tutorials/scrlbar.html">http://www.howtocreate.co.uk/tutorials/scrlbar.html</a>