[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 #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>