WebUI Dark Mode: update cr-radio-button colors

Screenshots: https://imgur.com/a/wEShNS0
Spec: https://docs.google.com/presentation/d/1kJoBzf_HGYK-_FAJPAjD67TW8224dCPLA6dAhlDmysk/edit?ts=5c363f50#slide=id.g364d7f9db1_0_8

Bug: 883049
Change-Id: I675df4e74c8530de14a3b9dc662c61446a715f6d
Reviewed-on: https://chromium-review.googlesource.com/c/1427741
Commit-Queue: Dan Beam <dbeam@chromium.org>
Commit-Queue: Esmael El-Moslimany <aee@chromium.org>
Auto-Submit: Dan Beam <dbeam@chromium.org>
Reviewed-by: Esmael El-Moslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#625014}
diff --git a/ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button_style_css.html b/ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button_style_css.html
index 4ff9b85..b344aa5 100644
--- a/ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button_style_css.html
+++ b/ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button_style_css.html
@@ -8,10 +8,14 @@
   <template>
     <style>
       :host {
+        --cr-radio-button-checked-color: var(--google-blue-600);
+        --cr-radio-button-checked-ripple-color:
+            rgba(var(--google-blue-600-rgb), .2);
         --cr-radio-button-ink-size: 40px;
         --cr-radio-button-size: 16px;
         --cr-radio-button-unchecked-color: var(--google-grey-refresh-700);
-        --cr-radio-button-checked-color: var(--google-blue-600);
+        --cr-radio-button-unchecked-ripple-color:
+            rgba(var(--google-grey-600-rgb), .15);
 
         --ink-to-circle: calc((var(--cr-radio-button-ink-size) -
                                var(--cr-radio-button-size)) / 2);
@@ -21,6 +25,15 @@
         outline: none;
       }
 
+      :host-context([dark]) {
+        --cr-radio-button-checked-color: var(--google-blue-refresh-300);
+        --cr-radio-button-checked-ripple-color:
+            rgba(var(--google-blue-refresh-300-rgb), .4);
+        --cr-radio-button-unchecked-color: var(--google-grey-refresh-500);
+        --cr-radio-button-unchecked-ripple-color:
+            rgba(var(--google-grey-refresh-300-rgb), .4);
+      }
+
       :host([disabled]) {
         opacity: var(--cr-disabled-opacity);
         /* Disable pointer events for this whole element, as outer on-tap gets
@@ -87,8 +100,8 @@
       }
 
       paper-ripple {
-        --paper-ripple-opacity: 0.15;
-        color: var(--google-grey-600);
+        --paper-ripple-opacity: 1;  /* Opacity in each color's alpha. */
+        color: var(--cr-radio-button-unchecked-ripple-color);
         height: var(--cr-radio-button-ink-size);
         left: calc(-1 * var(--ink-to-circle));
         pointer-events: none;
@@ -104,8 +117,7 @@
       }
 
       :host([checked]) paper-ripple {
-        --paper-ripple-opacity: 0.2;
-        color: var(--google-blue-600);
+        color: var(--cr-radio-button-checked-ripple-color);
       }
     </style>
   </template>