[CrOS WebUI Colors] Pull cr-toggle ripple opacities into cros_colors.css.

This CL pulls the opacity settings of cr-toggle ripples into the
centralized color style sheet. This makes cr-toggle colors more consistent
with cr-radio-button which uses a paper-ripple-opacity of 1 in order to
allow the ripple opacity to be specified as part of the ripple color.

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

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

@@ -25,11 +25,13 @@ To get Chrome OS System Colors, an element must:
       :host-context([cros]) cr-toggle {
         --cr-toggle-checked-bar-color: var(--cros-toggle-color);
         --cr-toggle-checked-button-color: var(--cros-toggle-color);
-        --cr-toggle-checked-ink-color: var(--cros-toggle-color);
+        --cr-toggle-checked-ink-color: var(--cros-toggle-ripple-color);
+        --cr-toggle-ripple-opacity: 1;  /* Opacity in each color's alpha. */
         --cr-toggle-unchecked-bar-color: var(--cros-toggle-bg-color-inactive);
         --cr-toggle-unchecked-button-color:
             var(--cros-toggle-button-color-inactive);
-        --cr-toggle-unchecked-ink-color: var(--cros-toggle-ink-color-inactive);
+        --cr-toggle-unchecked-ink-color:
+            var(--cros-toggle-ripple-color-inactive);
       }
     </style>
   </template>

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

@@ -109,8 +109,8 @@
       }
 
       @media (prefers-color-scheme: light) {
-        :host([checked]) paper-ripple {
-          --paper-ripple-opacity: 0.2;
+        :host([checked]) {
+          --cr-toggle-ripple-opacity: 0.2;
         }
       }
     </style>

ui/webui/resources/css/cros_colors.css

@@ -28,10 +28,12 @@ html {
   --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);
+  --cros-toggle-color-rgb: var(--cros-default-button-color-rgb);
+  --cros-toggle-color: rgb(var(--cros-toggle-color-rgb));
   --cros-toggle-bg-color-inactive: var(--google-grey-400);
   --cros-toggle-button-color-inactive: #fff;
-  --cros-toggle-ink-color-inactive: var(--google-grey-600);
+  --cros-toggle-ripple-color: rgba(var(--cros-toggle-color-rgb), .2);
+  --cros-toggle-ripple-color-inactive: rgba(var(--google-grey-600-rgb), .15);
 
   --cros-radio-button-color-rgb: var(--cros-default-button-color-rgb);
   --cros-radio-button-color: rgb(var(--cros-radio-button-color-rgb));