WebUI MD Refresh: Update cr-toggle to adhere to the new spec.

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

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

 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-behaviors/paper-ripple-behavior.html">
+<link rel="import" href="../shared_vars_css.html">
 
 <dom-module id="cr-toggle">
   <template>
@@ -13,6 +14,7 @@
 
       :host([disabled]) {
         cursor: initial;
+        opacity: 0.38;
         pointer-events: none;
       }
 
@@ -29,11 +31,11 @@
       }
 
       #bar {
-        background-color: var(--cr-toggle-unchecked-bar-color, black);
+        background-color:
+          var(--cr-toggle-unchecked-bar-color, var(--google-grey-400));
         border-radius: 8px;
         height: 12px;
         left: 3px;
-        opacity: 0.4;
         position: absolute;
         top: 2px;
         transition: background-color linear 80ms;
@@ -43,17 +45,12 @@
 
       :host([checked]) #bar {
         background-color: var(
-            --cr-toggle-checked-bar-color, var(--google-blue-500));
-      }
-
-      :host([disabled]) #bar {
-        background-color: black;
-        opacity: 0.12;
+            --cr-toggle-checked-bar-color, var(--google-blue-600));
+        opacity: 0.5;
       }
 
       #knob {
-        background-color: var(
-            --cr-toggle-unchecked-button-color, var(--paper-grey-50));
+        background-color: var(--cr-toggle-unchecked-button-color, white);
         border-radius: 50%;
         box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
         display: block;
@@ -66,7 +63,7 @@
 
       :host([checked]) #knob {
         background-color: var(
-            --cr-toggle-checked-button-color, var(--google-blue-500));
+            --cr-toggle-checked-button-color, var(--google-blue-600));
         transform: translate3d(18px, 0, 0);
       }
 
@@ -74,11 +71,6 @@
         transform: translate3d(-18px, 0, 0);
       }
 
-      :host([disabled]) #knob {
-        background-color: #bdbdbd;
-        opacity: 1;
-      }
-
       paper-ripple {
         --paper-ripple-opacity: 0.125;
         color: var(--cr-toggle-unchecked-ink-color, var(--primary-text-color));

ui/webui/resources/cr_elements/shared_vars_css.html

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