[cr-toggle] Consolidate ripple opacity into ripple color.

This CL removes --cr-toggle-ripple-opacity in favor of specifying opacity
in --cr-toggle-ripple-color-checked and --cr-toggle-ripple-color-unchecked.
This makes ripple color easier to reason about and allows a clearer
point of ripple color override.

Bug: 10292245
Change-Id: I9d80c13d0805494cfbc33a58ca002bad5955f16b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1940003
Commit-Queue: calamity <calamity@chromium.org>
Reviewed-by: Dan Beam <dbeam@chromium.org>
Cr-Commit-Position: refs/heads/master@{#721908}

chrome/browser/resources/extensions/toolbar.html

@@ -12,9 +12,9 @@
     cr-toolbar cr-toggle {
       --cr-toggle-checked-bar-color: var(--google-grey-refresh-100);
       --cr-toggle-checked-button-color: white;
-      --cr-toggle-checked-ink-color: white;
+      --cr-toggle-checked-ripple-color: rgba(255, 255, 255, .2);
       --cr-toggle-unchecked-bar-color: var(--google-grey-600);
-      --cr-toggle-unchecked-ink-color: white;
+      --cr-toggle-unchecked-ripple-color: rgba(255, 255, 255, .15);
     }
   }
 

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

@@ -25,12 +25,11 @@ 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-ripple-color);
-        --cr-toggle-ripple-opacity: 1;  /* Opacity in each color's alpha. */
+        --cr-toggle-checked-ripple-color: var(--cros-toggle-ripple-color);
         --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:
+        --cr-toggle-unchecked-ripple-color:
             var(--cros-toggle-ripple-color-inactive);
       }
     </style>

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

@@ -9,11 +9,12 @@
       :host {
         --cr-toggle-checked-bar-color: var(--google-blue-600);
         --cr-toggle-checked-button-color: var(--google-blue-600);
-        --cr-toggle-checked-ink-color: var(--google-blue-600);
-        --cr-toggle-ripple-opacity: .15;
+        --cr-toggle-checked-ripple-color:
+            rgba(var(--google-blue-600-rgb), .2);
         --cr-toggle-unchecked-bar-color: var(--google-grey-400);
         --cr-toggle-unchecked-button-color: white;
-        --cr-toggle-unchecked-ink-color: var(--google-grey-600);
+        --cr-toggle-unchecked-ripple-color:
+            rgba(var(--google-grey-600-rgb), .15);
         cursor: pointer;
         display: block;
         min-width: 34px;
@@ -26,22 +27,24 @@
         :host {
           --cr-toggle-checked-bar-color: var(--google-blue-refresh-300);
           --cr-toggle-checked-button-color: var(--google-blue-refresh-300);
-          --cr-toggle-checked-ink-color: var(--google-blue-refresh-300);
-          --cr-toggle-ripple-opacity: .4;
+          --cr-toggle-checked-ripple-color:
+              rgba(var(--google-blue-refresh-300-rgb), .4);
           --cr-toggle-unchecked-bar-color: var(--google-grey-refresh-500);
           --cr-toggle-unchecked-button-color: var(--google-grey-refresh-300);
-          --cr-toggle-unchecked-ink-color: var(--google-grey-refresh-300);
+          --cr-toggle-unchecked-ripple-color:
+              rgba(var(--google-grey-refresh-300-rgb), .4);
         }
       }
       /* Keep the prefers-color-scheme and [dark] rules the same. */
       :host([dark]) {
         --cr-toggle-checked-bar-color: var(--google-blue-refresh-300);
         --cr-toggle-checked-button-color: var(--google-blue-refresh-300);
-        --cr-toggle-checked-ink-color: var(--google-blue-refresh-300);
-        --cr-toggle-ripple-opacity: .4;
+        --cr-toggle-checked-ripple-color:
+            rgba(var(--google-blue-refresh-300-rgb), .4);
         --cr-toggle-unchecked-bar-color: var(--google-grey-refresh-500);
         --cr-toggle-unchecked-button-color: var(--google-grey-refresh-300);
-        --cr-toggle-unchecked-ink-color: var(--google-grey-refresh-300);
+        --cr-toggle-unchecked-ripple-color:
+            rgba(var(--google-grey-refresh-300-rgb), .4);
       }
 
       :host([disabled]) {
@@ -70,7 +73,7 @@
       #knob {
         background-color: var(--cr-toggle-unchecked-button-color);
         border-radius: 50%;
-        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
+        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .4);
         display: block;
         height: 16px;
         position: relative;
@@ -89,8 +92,8 @@
       }
 
       paper-ripple {
-        --paper-ripple-opacity: var(--cr-toggle-ripple-opacity);
-        color: var(--cr-toggle-unchecked-ink-color);
+        --paper-ripple-opacity: 1;
+        color: var(--cr-toggle-unchecked-ripple-color);
         height: 40px;
         left: -12px;
         pointer-events: none;
@@ -99,19 +102,13 @@
         width: 40px;
       }
 
-      :host-context([dir=rtl]) paper-ripple {
-        left: auto;
-        right: -12px;
-      }
-
       :host([checked]) paper-ripple {
-        color: var(--cr-toggle-checked-ink-color);
+        color: var(--cr-toggle-checked-ripple-color);
       }
 
-      @media (prefers-color-scheme: light) {
-        :host([checked]) {
-          --cr-toggle-ripple-opacity: 0.2;
-        }
+      :host-context([dir=rtl]) paper-ripple {
+        left: auto;
+        right: -12px;
       }
     </style>
     <span id="bar"></span>