WebUI: allow setting paper-ripple's opacity.

Bug: 836391, 832184
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I1ae3418e5b153a89b6d6bd5169365cc50bab7a15
Reviewed-on: https://chromium-review.googlesource.com/1040273Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Commit-Queue: Scott Chen <scottchen@chromium.org>
Cr-Commit-Position: refs/heads/master@{#555919}

third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple.html

@@ -42,14 +42,28 @@ Example:
       this.$.ripple.upAction();
     }
 
-Styling ripple effect:
+There are a few ways to style the ripple effect:
 
-  Use CSS color property to style the ripple:
+  1) Set only the color of the ripple, allowing opacity to default to 0.25:
 
     paper-ripple {
       color: #4285f4;
     }
 
+  2) Set both the color and the opacity in one of two ways:
+
+    paper-ripple {
+      --paper-ripple-opacity: 0.5;
+      color: black;
+    }
+
+    or:
+
+    paper-ripple {
+      --paper-ripple-opacity: 1;
+      color: rgba(0, 0, 0, 0.5);
+    }
+
   Note that CSS color property is inherited so it is not required to set it on
   the `paper-ripple` element directly.
 
@@ -93,7 +107,7 @@ Apply `circle` class to make the rippling effect within a circle.
       .ripple {
         background-color: currentcolor;
         left: 0;
-        opacity: .25;
+        opacity: var(--paper-ripple-opacity, 0.25);
         pointer-events: none;
         position: absolute;
         will-change: height, transform, width;

ui/webui/resources/cr_elements/cr_toggle/cr_toggle.html

@@ -73,10 +73,10 @@
       }
 
       paper-ripple {
+        --paper-ripple-opacity: 0.125;
         color: var(--cr-toggle-unchecked-ink-color, var(--primary-text-color));
         height: 40px;
         left: -12px;
-        opacity: 0.5;
         pointer-events: none;
         top: -12px;
         transition: color linear 80ms;