WebUI: cr-icon-button, fix the icon colors in the toolbars

https://chromium-review.googlesource.com/c/chromium/src/+/1906962
changed the CSS variables in cr-icon-button to not have as many
fallbacks. The result was the cr-toolbar CSS that set the focus color
for all cr-icon-button's within it no longer worked as before when
the --enable-features=WebUIA11yEnhancements flag is set. This CL
fixes that.

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

chrome/browser/resources/bookmarks/toolbar.html

@@ -21,6 +21,7 @@
       }
 
       cr-icon-button {
+        --cr-icon-button-fill-color-focus: var(--cr-toolbar-background-color);
         justify-content: flex-end;
         margin: 4px;
       }

chrome/browser/resources/downloads/toolbar.html

@@ -28,6 +28,7 @@
       }
 
       cr-icon-button {
+        --cr-icon-button-fill-color-focus: var(--cr-toolbar-background-color);
         justify-content: flex-end;
         margin: 4px;
       }

chrome/browser/resources/settings/chromeos/os_toolbar/os_toolbar.html

@@ -17,6 +17,8 @@
         --cr-toolbar-search-field-border-radius: 4px;
         --cr-toolbar-search-field-input-color:
             var(--cros-default-text-color-secondary);
+        --cr-toolbar-search-field-input-bg-color:
+            var(--cros-default-toolbar-bg-color);
         align-items: center;
         background-color: var(--cros-default-toolbar-bg-color);
         color: var(--cros-default-text-color-secondary);
@@ -50,6 +52,7 @@
 
       cr-icon-button {
         --cr-icon-button-color: currentColor;
+        --cr-icon-button-fill-color-focus: var(--cros-default-toolbar-bg-color);
         --cr-icon-button-size: 32px;
         min-width: 32px;
       }

ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.html

@@ -12,9 +12,8 @@
   <template>
     <style include="cr-icons cr-hidden-style">
       :host {
-        --cr-icon-button-focus-color: var(--google-blue-700);
         align-items: center;
-        background-color: var(--google-blue-700);
+        background-color: var(--cr-toolbar-background-color);
         color: #fff;
         display: flex;
         height: var(--cr-toolbar-height);
@@ -22,10 +21,6 @@
 
       @media (prefers-color-scheme: dark) {
         :host {
-          /* Toolbar background color rgba(255, 255, 255, .04) added to body
-             background color --google-grey-900. */
-          --cr-icon-button-focus-color: #28292c;
-          background-color: rgba(255, 255, 255, .04);
           border-bottom: var(--cr-separator-line);
           box-sizing: border-box;
           color: var(--cr-secondary-text-color);
@@ -63,6 +58,7 @@
       }
 
       cr-icon-button {
+        --cr-icon-button-fill-color-focus: var(--cr-toolbar-background-color);
         --cr-icon-button-size: 32px;
         min-width: 32px;
       }

ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.html

@@ -25,20 +25,25 @@
       }
 
       cr-icon-button {
+        --cr-icon-button-fill-color-focus: var(
+            --cr-toolbar-search-field-input-bg-color,
+            var(--cr-toolbar-background-color));
         --cr-icon-button-size: 32px;
         margin: 6px;
       }
 
       @media (prefers-color-scheme: light) {
         cr-icon-button {
-          --cr-icon-button-color: var(--cr-toolbar-search-field-input-color,
+          --cr-icon-button-fill-color: var(
+              --cr-toolbar-search-field-input-color,
               white);
         }
       }
 
       @media (prefers-color-scheme: dark) {
         cr-icon-button {
-          --cr-icon-button-color: var(--cr-toolbar-search-field-input-color,
+          --cr-icon-button-fill-color: var(
+              --cr-toolbar-search-field-input-color,
               var(--google-grey-refresh-500));
         }
       }

ui/webui/resources/cr_elements/shared_vars_css.html

@@ -21,6 +21,8 @@
     --google-grey-800: rgb(var(--google-grey-800-rgb));
     --google-grey-900-rgb: 32, 33, 36;  /* #202124 */
     --google-grey-900: rgb(var(--google-grey-900-rgb));
+    /* --google-grey-900 + 4% white blended together. */
+    --google-grey-900-white-4-percent: #292a2d;
 
     --google-red-600-rgb: 217, 48, 37;  /* #d93025 */
     --google-red-600: rgb(var(--google-red-600-rgb));
@@ -77,6 +79,7 @@
     --cr-separator-color: rgba(0, 0, 0, .06);
     --cr-title-text-color: rgb(90, 90, 90);
     --cr-toggle-color: var(--google-blue-500);
+    --cr-toolbar-background-color: var(--google-blue-700);
   }
 
   @media (prefers-color-scheme: dark) {
@@ -107,6 +110,7 @@
       --cr-separator-color: rgba(255, 255, 255, .1);
       /* TODO(dbeam): --cr-toggle-color (CrOS only). */
       --cr-title-text-color: var(--cr-primary-text-color);
+      --cr-toolbar-background-color: var(--google-grey-900-white-4-percent);
     }
   }