WebUI: cr-icon-button, use stroke color as ripple color if set

For example cr-camera's videocam-shutter has a red fill enclosed by a
white stroke. In this case, the ripple should be white matching the
outer region of the icon. Currently, --cr-icon-button-color to white
for all cr-icon-buttons in cr-camera. There should be no change in
behavior due to this CL.

This CL is needed for a follow-up CL that removes
--cr-icon-button-color.

Bug: 1022752
Change-Id: Ib22042d8719aa8d4d54cea9c87ce1641e7f7994b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1914515
Commit-Queue: Esmael Elmoslimany <aee@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#715433}

ui/webui/resources/cr_elements/cr_icon_button/cr_icon_button.html

@@ -16,8 +16,6 @@
         /* TODO(aee): Delete --cr-icon-button-focus-color and replace all usages
          *     with --cr-icon-button-fill-color-focus. */
         --cr-icon-button-focus-color: white;
-        --cr-icon-button-stroke-color-focus: none;
-        --cr-icon-button-stroke-color: none;
         --cr-icon-button-icon-start-offset: 0;
         --cr-icon-button-icon-size: 20px;
         --cr-icon-button-size: 36px;
@@ -27,7 +25,8 @@
         /* Copied from paper-fab.html. Prevents square touch highlight. */
         -webkit-tap-highlight-color: transparent;
         border-radius: 4px;
-        color: var(--cr-icon-button-color);
+        color: var(--cr-icon-button-stroke-color,
+            var(--cr-icon-button-fill-color));
         cursor: pointer;
         display: inline-flex;
         flex-shrink: 0;
@@ -86,7 +85,7 @@
 
       iron-icon {
         --iron-icon-fill-color: var(--cr-icon-button-fill-color);
-        --iron-icon-stroke-color: var(--cr-icon-button-stroke-color);
+        --iron-icon-stroke-color: var(--cr-icon-button-stroke-color, none);
         --iron-icon-height: var(--cr-icon-button-icon-size);
         --iron-icon-width: var(--cr-icon-button-icon-size);
         transition: fill var(--cr-icon-button-transition),
@@ -96,7 +95,8 @@
 
       :host-context([a11y-enhanced]):host([ripple-showing_]) iron-icon {
         --iron-icon-fill-color: var(--cr-icon-button-fill-color-focus);
-        --iron-icon-stroke-color: var(--cr-icon-button-stroke-color-focus);
+        --iron-icon-stroke-color: var(--cr-icon-button-stroke-color-focus,
+            none);
       }
 
       paper-ripple {