WebUI Dark Mode: create shared --cr-checked-color and use it

R=aee@chromium.org
BUG=833049

Change-Id: I51412d06bf6ed61ba6afc35d6166d15754cb603d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1501575
Commit-Queue: Dan Beam <dbeam@chromium.org>
Auto-Submit: Dan Beam <dbeam@chromium.org>
Reviewed-by: Esmael El-Moslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#637570}

chrome/browser/resources/settings/incompatible_applications_page/incompatible_applications_page.html

@@ -13,7 +13,7 @@
   <template>
     <style include="settings-shared">
       #is-done-section > iron-icon {
-        --iron-icon-fill-color: var(--google-blue-500);
+        --iron-icon-fill-color: var(--cr-checked-color);
       }
     </style>
 

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

@@ -38,11 +38,13 @@ List of customizable styles:
         --cr-checkbox-ripple-offset: calc(var(--cr-checkbox-size)/2 -
             var(--cr-checkbox-ripple-size)/2 - var(--cr-checkbox-border-size));
 
+        /* --cr-checked-color automatically flips for light/dark mode. */
+        --cr-checkbox-checked-box-color: var(--cr-checked-color);
+        --cr-checkbox-ripple-checked-color: var(--cr-checked-color);
+
         /* Light mode colors. */
-        --cr-checkbox-checked-box-color: var(--google-blue-600);
         --cr-checkbox-checked-ripple-opacity: .2;
         --cr-checkbox-mark-color: white;
-        --cr-checkbox-ripple-checked-color: var(--google-blue-600);
         --cr-checkbox-ripple-unchecked-color: var(--google-grey-600);
         --cr-checkbox-unchecked-box-color: var(--google-grey-refresh-700);
         --cr-checkbox-unchecked-ripple-opacity: .15;
@@ -50,10 +52,8 @@ List of customizable styles:
 
       :host-context([dark]) {
         /* Dark mode colors. */
-        --cr-checkbox-checked-box-color: var(--google-blue-refresh-300);
         --cr-checkbox-checked-ripple-opacity: .4;
         --cr-checkbox-mark-color: var(--google-grey-900);
-        --cr-checkbox-ripple-checked-color: var(--google-blue-refresh-300);
         --cr-checkbox-ripple-unchecked-color: var(--google-grey-refresh-700);
         --cr-checkbox-unchecked-box-color: var(--google-grey-refresh-500);
         --cr-checkbox-unchecked-ripple-opacity: .4;

ui/webui/resources/cr_elements/shared_vars_css.html

@@ -64,13 +64,13 @@
       box-shadow: var(--cr-card-shadow);
     }
 
+    --cr-checked-color: var(--google-blue-600);
     --cr-focused-item-color: var(--google-grey-300);
     --cr-form-field-label-color: var(--google-grey-refresh-700);
     --cr-link-color: var(--google-blue-700);
     --cr-menu-background-color: white;
     --cr-menu-background-focus-color: var(--google-grey-200);
     --cr-menu-shadow: 0 2px 6px var(--paper-grey-500);
-    --cr-section-text-color: var(--google-grey-refresh-700);
     --cr-separator-color: rgba(0, 0, 0, .06);
     --cr-title-text-color: rgb(90, 90, 90);
     --cr-toggle-color: var(--google-blue-500);
@@ -91,8 +91,7 @@
       box-shadow: var(--cr-card-shadow);  /* Uses --cr-card-shadow-color-rgb. */
     }
 
-    /* TODO(dbeam): form-field-label, {section,title}-text, & toggle colors. */
-
+    --cr-checked-color: var(--google-blue-refresh-300);
     --cr-form-field-label-color: var(--dark-secondary-color);
     --cr-link-color: var(--google-blue-refresh-300);
     --cr-menu-background-color: var(--google-grey-900);
@@ -101,6 +100,7 @@
     --cr-menu-shadow: rgba(0, 0, 0, .3) 0 1px 2px 0,
                       rgba(0, 0, 0, .15) 0 3px 6px 2px;
     --cr-separator-color: rgba(255, 255, 255, .1);
+    /* TODO(dbeam): --cr-toggle-color (CrOS only). */
     --cr-title-text-color: var(--cr-primary-text-color);
   }
 
@@ -151,9 +151,9 @@
     }
 
     --cr-primary-text: {
-        color: var(--cr-primary-text-color);
-        line-height: 154%;  /* 20px. */
-     }
+      color: var(--cr-primary-text-color);
+      line-height: 154%;  /* 20px. */
+    }
 
     --cr-secondary-text: {
       color: var(--cr-secondary-text-color);
@@ -202,15 +202,9 @@
     }
 
     --cr-title-text: {
-        color: var(--cr-title-text-color);
-        font-size: 107.6923%;  /* Go to 14px from 13px. */
-        font-weight: 500;
-    }
-
-    --cr-section-text: {
-        color: var(--cr-section-text-color);
-        font-size: 100%;  /* Likely to be 13px. */
-        font-weight: 500;
+      color: var(--cr-title-text-color);
+      font-size: 107.6923%;  /* Go to 14px from 13px. */
+      font-weight: 500;
     }
 
     --cr-tooltip: {