[OS Settings] Apply Chrome OS semantic colors to cr-radio-buttons.

This CL plumbs the Chrome OS semantic colors into cr-radio-buttons
similar to http://crrev.com/c/1925834.

To test, go to chrome://os-settings and type

$$('html')[0].style.setProperty(
    '--cros-default-button-color-rgb', '255, 0, 0')

into DevTools which should change the color of all radio buttons on
the page.

Bug: 1018654
Change-Id: I31bcca35d5b0d21d4f3dcf1adead86314647da12
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1935569Reviewed-by: Giovanni Ortuño Urquidi <ortuno@chromium.org>
Commit-Queue: calamity <calamity@chromium.org>
Cr-Commit-Position: refs/heads/master@{#719904}

ui/webui/resources/cr_elements/chromeos/cros_color_overrides.html

@@ -12,6 +12,16 @@ To get Chrome OS System Colors, an element must:
 <dom-module id="cros-color-overrides">
   <template>
     <style>
+      :host-context([cros]) cr-radio-button {
+        --cr-radio-button-checked-color: var(--cros-radio-button-color);
+        --cr-radio-button-checked-ripple-color:
+            var(--cros-radio-button-ripple-color);
+        --cr-radio-button-unchecked-color:
+            var(--cros-radio-button-color-unchecked);
+        --cr-radio-button-unchecked-ripple-color:
+            var(--cros-radio-button-ripple-color-unchecked);
+      }
+
       :host-context([cros]) cr-toggle {
         --cr-toggle-checked-bar-color: var(--cros-toggle-color);
         --cr-toggle-checked-button-color: var(--cros-toggle-color);

ui/webui/resources/css/cros_colors.css

@@ -20,7 +20,12 @@ html {
   --cros-default-toolbar-bg-color: #fff;
   --cros-default-toolbar-search-bg-color: var(--google-grey-refresh-100);
 
-  --cros-default-button-color: var(--google-blue-600);
+  --cros-default-button-color-rgb: var(--google-blue-600-rgb);
+  --cros-default-button-color: rgb(var(--cros-default-button-color-rgb));
+
+  --cros-menu-button-bg-color-active: var(--google-blue-50);
+  --cros-menu-button-bg-color-hover: var(--google-grey-refresh-100);
+  --cros-menu-button-outline-color-focused: var(--google-blue-600);
 
   /* TODO(crbug.com/1018654): Extract more unified 'inactive' colors */
   --cros-toggle-color: var(--cros-default-button-color);
@@ -28,9 +33,13 @@ html {
   --cros-toggle-button-color-inactive: #fff;
   --cros-toggle-ink-color-inactive: var(--google-grey-600);
 
-  --cros-menu-button-bg-color-active: var(--google-blue-50);
-  --cros-menu-button-bg-color-hover: var(--google-grey-refresh-100);
-  --cros-menu-button-outline-color-focused: var(--google-blue-600);
+  --cros-radio-button-color-rgb: var(--cros-default-button-color-rgb);
+  --cros-radio-button-color: rgb(var(--cros-radio-button-color-rgb));
+  --cros-radio-button-ripple-color:
+      rgba(var(--cros-radio-button-color-rgb), .2);
+  --cros-radio-button-color-unchecked: var(--google-grey-refresh-700);
+  --cros-radio-button-ripple-color-unchecked:
+      rgba(var(--google-grey-600-rgb), .15);
 
   --cros-separator-color: rgba(0, 0, 0, 0.12);