[cr-slider] Consolidate ripple opacity into ripple color.

This CL removes --cr-slider-ripple-opacity in favor of specifying opacity
in --cr-slider-ripple-color. This makes ripple color easier to reason
about and allows a clear, single point of ripple color override.

TBR=lucmult@chromium.org

Bug: 10292245
Change-Id: I5b8ad44a42dea1d953e6b104c0ad5380416f439d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1941448Reviewed-by: Luciano Pacheco <lucmult@chromium.org>
Reviewed-by: Dan Beam <dbeam@chromium.org>
Reviewed-by: calamity <calamity@chromium.org>
Commit-Queue: calamity <calamity@chromium.org>
Cr-Commit-Position: refs/heads/master@{#722386}

ui/file_manager/audio_player/elements/control_panel.css

@@ -91,7 +91,7 @@
 
 .time-volume-controls > cr-slider {
   --cr-slider-active-color: rgb(66, 133, 244);
-  --cr-slider-knob-color: rgb(64, 138, 241);
+  --cr-slider-knob-color-rgb: 64, 138, 241;
 }
 
 cr-slider {

ui/file_manager/gallery/gallery.html

@@ -47,7 +47,7 @@
       cr-slider {
         --cr-slider-active-color: white;
         --cr-slider-container-color: rgba(255, 255, 255, 0.2);
-        --cr-slider-knob-color: white;
+        --cr-slider-knob-color-rgb: 255, 255, 255;
         --cr-slider-secondary-color: transparent;
       }
       paper-progress {

ui/file_manager/video_player/video_player.html

@@ -33,7 +33,7 @@
       cr-slider {
         cursor: pointer;
 
-        --cr-slider-knob-color: rgb(64, 138, 241);
+        --cr-slider-knob-color-rgb: 64, 138, 241;
         --cr-slider-active-color: rgb(66, 133, 244);
       }
 

ui/webui/resources/cr_elements/cr_slider/cr_slider.html

@@ -15,13 +15,13 @@
         --cr-slider-container-disabled-color:
             rgba(var(--google-grey-600-rgb), .24);
         --cr-slider-disabled-color: var(--google-grey-600);
-        --cr-slider-knob-color: var(--google-blue-600);
+        --cr-slider-knob-color-rgb: var(--google-blue-600-rgb);
         --cr-slider-knob-disabled-color: white;
-        --cr-slider-marker-active-color: rgba(255, 255, 255, 0.54);
-        --cr-slider-marker-color: rgba(26, 115, 232, 0.54);
-        --cr-slider-marker-disabled-color: rgba(128, 134, 139, 0.54);
+        --cr-slider-marker-active-color: rgba(255, 255, 255, .54);
+        --cr-slider-marker-color: rgba(26, 115, 232, .54);
+        --cr-slider-marker-disabled-color: rgba(128, 134, 139, .54);
         --cr-slider-position-transition: 80ms ease;
-        /* --cr-slider-ripple-opacity is left at default in light mode. */
+        --cr-slider-ripple-color: rgba(var(--cr-slider-knob-color-rgb), .25);
 
         -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
         cursor: default;
@@ -39,13 +39,13 @@
           --cr-slider-container-disabled-color:
               rgba(var(--google-grey-600-rgb), .48);
           /* --cr-slider-disabled-color is the same in dark mode (GG600). */
-          --cr-slider-knob-color: var(--google-blue-refresh-300);
+          --cr-slider-knob-color-rgb: var(--google-blue-refresh-300-rgb);
           --cr-slider-knob-disabled-color:
               var(--google-grey-900-white-4-percent);
           --cr-slider-marker-active-color: var(--google-blue-refresh-300);
           --cr-slider-marker-color: var(--google-blue-refresh-300);
           --cr-slider-marker-disabled-color: rgba(255, 255, 255, .54);
-          --cr-slider-ripple-opacity: .4;
+          --cr-slider-ripple-color: rgba(var(--cr-slider-knob-color-rgb), .4);
         }
       }
 
@@ -129,9 +129,9 @@
       }
 
       #knob {
-        background-color: var(--cr-slider-knob-color);
+        background-color: rgb(var(--cr-slider-knob-color-rgb));
         border-radius: 50%;
-        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
+        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .4);
         height: 10px;
         outline: none;
         transform: translate(-50%, -50%);
@@ -143,7 +143,7 @@
       }
 
       #label {
-        background: var(--cr-slider-knob-color);
+        background: rgb(var(--cr-slider-knob-color-rgb));
         border-radius: .75em;
         bottom: 22px;
         color: white;  /* Same for dark and light mode. */
@@ -170,8 +170,8 @@
       }
 
       paper-ripple {
-        --paper-ripple-opacity: var(--cr-slider-ripple-opacity);
-        color: var(--cr-slider-knob-color);
+        --paper-ripple-opacity: 1;  /* Opacity in each color's alpha. */
+        color: var(--cr-slider-ripple-color);
         height: 32px;
         left: -11px;
         pointer-events: none;