WebUI[MD-refresh]: change cr-checkbox ripple color

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

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

@@ -72,13 +72,10 @@
       }
 
       paper-ripple {
-        color: var(--cr-controls-background-grey);
+        --paper-ripple-opacity: 0.1;
+        color: var(--google-grey-900);
         height: 40px;
         left: -12px;
-        /* TODO(scottchen): this depends on opacity: 0.4 to compound with
-           paper-ripple's internal opacity: 0.25 to become 0.1. Use custom
-           property instead once paper-ripple supports it. */
-        opacity: 0.4;
         pointer-events: none;
         top: -12px;
         transition: color linear 80ms;

ui/webui/resources/cr_elements/shared_vars_css.html

@@ -121,6 +121,6 @@
     /** MD Refresh Styles */
     --google-blue-600: #1A73E8;
     --google-grey-400: #BDC1C6;
-    --cr-controls-background-grey: #2A3146;
+    --google-grey-900: #202124;
   }
 </style>