reduce to two properties, -face-color -track-color

Per #1960 (comment) implementation/prototyping experience, reduce number of properties to two: scrollbar-face-color and scrollbar-track-color. Resolves issue #1960

Author: tantek

css-scrollbars-1/Overview.bs

@@ -56,14 +56,8 @@ Values</h3>
 Scrollbar Color Properties</h2>
 
 <pre class="propdef">
-Name: scrollbar-3dlight-color, 
-      scrollbar-arrow-color,  
-      scrollbar-base-color, 
-      scrollbar-darkshadow-color, 
-      scrollbar-face-color, 
-      scrollbar-highlight-color, 
-      scrollbar-track-color, 
-      scrollbar-shadow-color
+Name: scrollbar-face-color, 
+      scrollbar-track-color
 Value: auto | <<color>>
 Initial: auto
 Inherited: yes
@@ -76,18 +70,12 @@ Media: visual
 
 These properties allow the author to set colors for various aspects of an element’s scrollbars.
 
-Note: Per <a href="https://github.com/w3c/csswg-drafts/issues/1960">Issue 1960</a>, 
-the list of scrollbar-*-color properties is likely to be reduced to 2-3 (ideally 2), 
-with current candidates being scrollbar-base-color, scrollbar-face-color, scrollbar-track-color, 
-per <a href="https://www.w3.org/wiki/Css-scrollbars#Use-cases">research so far</a>, 
-and preferably only two of those. Additional input, data, suggestions welcome at those links!
-
 UAs must apply the scrollbar-* values set on the root element to the viewport.
 
 Note: Unlike 'overflow' (and overflow-*) properties, 
 scrollbar-* values set on the HTML body element are not propagated to viewport.
 
-<dl dfn-type="value" dfn-for="scrollbar-base-color">
+<dl dfn-type="value" dfn-for="scrollbar-face-color">
 <dt><dfn>auto</dfn>
 <dd>default platform rendering for that portion of the scrollbar, in the absence of any other 
 related scrollbar color properties. See details below for which scrollbar color are related to which.
@@ -97,15 +85,8 @@ related scrollbar color properties. See details below for which scrollbar color
 
 Details:
 
-If scrollbar-track-color computes to auto, and scrollbar-face-color and scrollbar-highlight-color are not auto, 
-they are combined (e.g. dithered) to color the scrollbar track. 
-If just one of scrollbar-face-color and scrollbar-highlight-color is not auto, it is used to color the scrollbar track. 
-
-If scrollbar-face-color computes to auto and scrollbar-base-color is not auto, 
-then use its value for scrollbar-face-color.
-
-If scrollbar-3dlight-color computes to auto and scrollbar-base-color is not auto, 
-then use its value for scrollbar-3dlight-color.
+If scrollbar-track-color computes to auto, and scrollbar-face-color is not auto, 
+it is used to color the scrollbar track. 
 
 If an element has both horizontal and vertical scrollbars, and the scrollbar-face-color is not auto, 
 use it for the area in the corner between the two scrollbars.
@@ -122,26 +103,21 @@ PNG of the same in a browser that supports it currently)
 Implementations may ignore any scrollbar color properties for scrollbar parts that do not exist 
 on the underlying platform.
 
-Note: when a user interacts with a scrollbar (e.g. arrow buttons or scroll thumb if any), 
-implementations may alter which scrollbar colors apply to which scrollbar parts (e.g. replace 3dlight and darkshadow colors with their shadow color, and highlight and shadow colors with their face color.
+Note: when a user interacts with a scrollbar (e.g. hovering or activating), 
+implementations may alter which scrollbar colors apply to which scrollbar parts.
 
 Note: IE uses named System Colors as defaults for each of the scrollbar color properties. 
 See related <a href="https://github.com/w3c/csswg-drafts/issues/1956">Issue 1956</a>.
 
   <div class="example">
     <p>The following example 
-    (as noted in 
+    (derived from
     <a href="https://www.w3.org/Style/Examples/007/scrollbars.en.html">https://www.w3.org/Style/Examples/007/scrollbars.en.html</a>) 
     resets scrollbar colors in IE.</p>
 
     <pre><code class="css">
 <!-- -->html { 
 <!-- -->    scrollbar-face-color: ThreeDFace;
-<!-- -->    scrollbar-shadow-color: ThreeDDarkShadow;
-<!-- -->    scrollbar-highlight-color: ThreeDHighlight;
-<!-- -->    scrollbar-3dlight-color: ThreeDLightShadow;
-<!-- -->    scrollbar-darkshadow-color: ThreeDDarkShadow;
 <!-- -->    scrollbar-track-color: Scrollbar;
-<!-- -->    scrollbar-arrow-color: ButtonText;
 <!-- -->}</code></pre>
   </div>