WebUI: make ripple darker for toggle, checkbox and radio button

Bug: 854732
Cq-Include-Trybots: luci.chromium.try:closure_compilation
Change-Id: I4ce3bb683bf41bc46e4bcc896d5705b75b714938
Reviewed-on: https://chromium-review.googlesource.com/1114006Reviewed-by: Scott Chen <scottchen@chromium.org>
Commit-Queue: Esmael El-Moslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#570183}

ui/webui/resources/cr_elements/cr_checkbox/cr_checkbox.html

@@ -89,8 +89,8 @@ List of customizable styles:
       }
 
       paper-ripple {
-        --paper-ripple-opacity: var(--cr-checkbox-ripple-opacity, 0.1);
-        color: var(--cr-checkbox-ripple-unchecked-color, var(--google-grey-900));
+        --paper-ripple-opacity: var(--cr-checkbox-ripple-opacity, 0.15);
+        color: var(--cr-checkbox-ripple-unchecked-color, var(--google-grey-600));
         height: var(--cr-checkbox-ripple-size);
         left: var(--cr-checkbox-ripple-offset);
         pointer-events: none;
@@ -100,6 +100,7 @@ List of customizable styles:
       }
 
       :host([checked]) paper-ripple {
+        --paper-ripple-opacity: var(--cr-checkbox-ripple-opacity, 0.2);
         color: var(--cr-checkbox-ripple-checked-color, var(--google-blue-600));
       }
 

ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button_style_css.html

@@ -86,8 +86,8 @@
       }
 
       paper-ripple {
-        --paper-ripple-opacity: 0.1;
-        color: var(--google-grey-900);
+        --paper-ripple-opacity: 0.15;
+        color: var(--google-grey-600);
         height: var(--cr-radio-button-ink-size);
         left: calc(-1 * var(--ink-to-circle));
         pointer-events: none;
@@ -103,6 +103,7 @@
       }
 
       :host([checked]) paper-ripple {
+        --paper-ripple-opacity: 0.2;
         color: var(--google-blue-600);
       }
     </style>

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

@@ -72,8 +72,8 @@
       }
 
       paper-ripple {
-        --paper-ripple-opacity: 0.125;
-        color: var(--cr-toggle-unchecked-ink-color, var(--primary-text-color));
+        --paper-ripple-opacity: 0.15;
+        color: var(--cr-toggle-unchecked-ink-color, var(--google-grey-600));
         height: 40px;
         left: -12px;
         pointer-events: none;
@@ -88,7 +88,8 @@
       }
 
       :host([checked]) paper-ripple {
-        color: var(--cr-toggle-checked-ink-color, var(--primary-color));
+        --paper-ripple-opacity: 0.2;
+        color: var(--cr-toggle-checked-ink-color, var(--google-blue-600));
       }
     </style>
     <!-- A <button> is used (instead of a plain <div>) to avoid a corner case