WebUI: cr-icon-button, rename CSS variables

old: --cr-icon-button-color
new: --cr-icon-button-fill-color

old: --cr-icon-button-focus-color
new: --cr-icon-button-fill-color-focus

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

chrome/browser/resources/bookmarks/item.html

@@ -16,7 +16,7 @@
   }
 
   :host([is-selected-item_]) cr-icon-button {
-    --cr-icon-button-focus-color: var(--highlight-color);
+    --cr-icon-button-fill-color-focus: var(--highlight-color);
   }
 
   @media (prefers-color-scheme: dark) {
@@ -72,7 +72,7 @@
 
   @media (prefers-color-scheme: dark) {
     :host([is-selected-item_]) cr-icon-button {
-      --cr-icon-button-color: var(--google-grey-700);
+      --cr-icon-button-fill-color: var(--google-grey-700);
     }
   }
 

chrome/browser/resources/bookmarks/toolbar.html

@@ -17,7 +17,7 @@
 
   @media (prefers-color-scheme: light) {
     cr-icon-button {
-      --cr-icon-button-color: currentColor;
+      --cr-icon-button-fill-color: currentColor;
     }
   }
 

chrome/browser/resources/chromeos/emulator/shared_styles.html

@@ -2,7 +2,7 @@
   <template>
     <style>
       cr-icon-button {
-        --cr-icon-button-color: rgb(82, 101, 162);
+        --cr-icon-button-fill-color: rgb(82, 101, 162);
         margin: 0;
       }
 

chrome/browser/resources/chromeos/login/gaia_icon_button.css

@@ -3,7 +3,7 @@
  * found in the LICENSE file. */
 
 cr-icon-button {
-  --cr-icon-button-color: currentColor;
+  --cr-icon-button-fill-color: currentColor;
   --cr-icon-button-icon-size: 24px;
   --cr-icon-button-size: 24px;
   margin: 0;

chrome/browser/resources/downloads/toolbar.html

@@ -17,7 +17,7 @@
 
   @media (prefers-color-scheme: light) {
     cr-icon-button {
-      --cr-icon-button-color: currentColor;
+      --cr-icon-button-fill-color: currentColor;
     }
   }
 </style>

chrome/browser/resources/history/history_item.html

@@ -109,7 +109,7 @@
       }
 
       #bookmark-star {
-        --cr-icon-button-color: var(--interactive-color);
+        --cr-icon-button-fill-color: var(--interactive-color);
         --cr-icon-button-icon-size: 16px;
         --cr-icon-button-margin-start: 12px;
         --cr-icon-button-size: 32px;

chrome/browser/resources/pdf/elements/viewer-bookmark.html

@@ -28,7 +28,7 @@
       }
 
       #expand {
-        --cr-icon-button-color: var(--primary-text-color);
+        --cr-icon-button-fill-color: var(--primary-text-color);
         --cr-icon-button-icon-size: 16px;
         --cr-icon-button-size: 28px;
         margin: 0;

chrome/browser/resources/pdf/elements/viewer-pdf-toolbar.html

@@ -36,7 +36,7 @@
       }
 
       cr-icon-button {
-        --cr-icon-button-color: rgb(241, 241, 241);
+        --cr-icon-button-fill-color: rgb(241, 241, 241);
         margin: 6px;
       }
 

chrome/browser/resources/pdf/elements/viewer-toolbar-dropdown.html

@@ -54,7 +54,7 @@
       }
 
       #button {
-        --cr-icon-button-color: currentColor;
+        --cr-icon-button-fill-color: currentColor;
         --cr-icon-button-height: 32px;
         --cr-icon-button-icon-start-offset: 4px;
         --cr-icon-button-width: 48px;

chrome/browser/resources/pdf/elements/viewer-zoom-button.html

@@ -32,10 +32,10 @@
       }
 
       cr-icon-button {
-        --cr-icon-button-color: var(--paper-grey-700);
+        --cr-icon-button-fill-color: var(--paper-grey-700);
         --cr-icon-button-icon-size: 20px;
         --cr-icon-button-size: 36px;
-        --cr-icon-button-focus-color: rgb(242, 242, 242);
+        --cr-icon-button-fill-color-focus: rgb(242, 242, 242);
         background-color: rgb(242, 242, 242);
         border-radius: 50%;
         overflow: visible;
@@ -47,8 +47,8 @@
       }
 
       :host-context([is-print-preview]) cr-icon-button {
-        --cr-icon-button-color: white;
-        --cr-icon-button-focus-color: var(--google-grey-600);
+        --cr-icon-button-fill-color: white;
+        --cr-icon-button-fill-color-focus: var(--google-grey-600);
         --cr-icon-button-size: 32px;
         background-color: var(--google-grey-600);
       }
@@ -61,8 +61,8 @@
 
       @media (prefers-color-scheme: dark) {
         :host-context([is-print-preview]) cr-icon-button {
-          --cr-icon-button-color: var(--google-grey-200);
-          --cr-icon-button-focus-color: var(--google-grey-900);
+          --cr-icon-button-fill-color: var(--google-grey-200);
+          --cr-icon-button-fill-color-focus: var(--google-grey-900);
           background-color: var(--google-grey-900);
         }
       }

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

@@ -7,11 +7,11 @@
   <template>
     <style>
       cr-icon-button.icon-add-circle {
-        --cr-icon-button-color: var(--google-blue-refresh-500);
+        --cr-icon-button-fill-color: var(--google-blue-refresh-500);
         --cr-icon-image: url(./images/icon_add_circle.svg);
       }
       cr-icon-button.icon-add-wifi {
-        --cr-icon-button-color: var(--google-blue-refresh-500);
+        --cr-icon-button-fill-color: var(--google-blue-refresh-500);
         --cr-icon-image: url(./images/icon_add_wifi.svg);
       }
     </style>

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

@@ -51,7 +51,7 @@
       }
 
       cr-icon-button {
-        --cr-icon-button-color: currentColor;
+        --cr-icon-button-fill-color: currentColor;
         --cr-icon-button-fill-color-focus: var(--cros-default-toolbar-bg-color);
         --cr-icon-button-size: 32px;
         min-width: 32px;

ui/login/account_picker/chromeos_user_pod_row.css

@@ -208,7 +208,7 @@ html[dir=rtl] .pod.focused:not(.multiprofiles-policy-applied):not(.public-accoun
 .auth-container .submit-button {
   --cr-icon-button--icon-size: 20px;
   --cr-icon-button-size: 20px;
-  --cr-icon-button-color: white;
+  --cr-icon-button-fill-color: white;
   margin: 15px 0 5px 0;
   opacity: 1;
 }
@@ -965,7 +965,7 @@ html[dir=rtl] .pod.public-account .button-container {
 }
 
 .public-account-submit-button {
-  --cr-icon-button-color: #FFF;
+  --cr-icon-button-fill-color: #FFF;
   --cr-icon-button-size: 40px;
   opacity: 1;
 }

ui/login/account_picker/chromeos_user_pod_template.css

@@ -7,7 +7,7 @@
  */
 
 cr-icon-button {
-  --cr-icon-button-color: var(--google-grey-refresh-500);
+  --cr-icon-button-fill-color: var(--google-grey-refresh-500);
   cursor: default;
   margin: 0;
 }

ui/login/account_picker/user_pod_row.css

@@ -180,19 +180,19 @@ html[dir=rtl] .main-pane {
 }
 
 .auth-container .submit-button[disabled] {
-  --cr-icon-button-color: #000;
+  --cr-icon-button-fill-color: #000;
   opacity: 0.26;
 }
 
 .auth-container .submit-button {
-  --cr-icon-button-color: var(--google-blue-500);
+  --cr-icon-button-fill-color: var(--google-blue-500);
   --cr-icon-button-icon-size: 22px;
   --cr-icon-button-size: 43px;
   position: relative;
 }
 
 .auth-container .submit-button.error-shown {
-  --cr-icon-button-color: #CD2A00;
+  --cr-icon-button-fill-color: #CD2A00;
 }
 
 .name-container {

ui/webui/resources/cr_components/chromeos/quick_unlock/pin_keyboard.html

@@ -82,7 +82,7 @@
       }
 
       #backspaceButton {
-        --cr-icon-button-color: var(--pin-keyboard-backspace-color,
+        --cr-icon-button-fill-color: var(--pin-keyboard-backspace-color,
             var(--google-grey-700));
         --cr-icon-button-icon-size: 16px;
         --cr-icon-button-size: 48px;

ui/webui/resources/cr_elements/chromeos/cr_picture/cr_camera.html

@@ -111,8 +111,6 @@
       }
 
       #cameraControls cr-icon-button {
-        --cr-icon-button-color: white;
-        --cr-icon-button-focus-color: var(--google-blue-500);
         --cr-icon-button-icon-size: 20px;
         --cr-icon-button-size: 28px;
         margin: 0;
@@ -130,6 +128,11 @@
         --cr-icon-button-fill-color-focus: red;
       }
 
+      #switchMode {
+        --cr-icon-button-fill-color: white;
+        --cr-icon-button-fill-color-focus: var(--google-blue-500);
+      }
+
       :host-context([dir=rtl]) #switchMode {
         float: left;
       }

ui/webui/resources/cr_elements/chromeos/cr_picture/cr_picture_pane.html

@@ -57,8 +57,8 @@
       }
 
       cr-icon-button {
-        --cr-icon-button-color: white;
-        --cr-icon-button-focus-color: var(--google-blue-500);
+        --cr-icon-button-fill-color: white;
+        --cr-icon-button-fill-color-focus: var(--google-blue-500);
         --cr-icon-button-icon-size: 24px;
         --cr-icon-button-size: 28px;
         margin: 0;

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

@@ -8,14 +8,8 @@
   <template>
     <style>
       :host {
-        /* TODO(aee): Delete --cr-icon-button-color and replace all usages with
-         *     --cr-icon-button-fill-color. */
-        --cr-icon-button-color: var(--google-grey-refresh-700);
-        --cr-icon-button-fill-color-focus: var(--cr-icon-button-focus-color);
-        --cr-icon-button-fill-color: var(--cr-icon-button-color);
-        /* 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-fill-color: var(--google-grey-refresh-700);
+        --cr-icon-button-fill-color-focus: white;
         --cr-icon-button-icon-start-offset: 0;
         --cr-icon-button-icon-size: 20px;
         --cr-icon-button-size: 36px;
@@ -60,7 +54,7 @@
         -webkit-mask-position: center;
         -webkit-mask-repeat: no-repeat;
         -webkit-mask-size: var(--cr-icon-button-icon-size);
-        background-color: var(--cr-icon-button-color);
+        background-color: var(--cr-icon-button-fill-color);
         height: 100%;
         transition: background-color var(--cr-icon-button-transition);
         width: 100%;
@@ -107,8 +101,8 @@
 
       @media (prefers-color-scheme: dark) {
         :host {
-          --cr-icon-button-color: var(--google-grey-refresh-500);
-          --cr-icon-button-focus-color: var(--google-grey-900);
+          --cr-icon-button-fill-color: var(--google-grey-refresh-500);
+          --cr-icon-button-fill-color-focus: var(--google-grey-900);
         }
 
         paper-ripple {

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

@@ -65,7 +65,7 @@
 
       @media (prefers-color-scheme: light) {
         cr-icon-button {
-          --cr-icon-button-color: currentColor;
+          --cr-icon-button-fill-color: currentColor;
         }
       }