a11y: Fix OS Settings search colors for contrast

This change introduces darker colors to Settings search page to improve
the background contrast ratio to reach ARIA standards.

Add a variable for prompt color and icon opacity to
<cr-toolbar-search-field> so these attributes can maintain different
values in non-Settings surfaces
(Downloads search, Bookmarks search, etc.).

Settings screenshot: http://screen/BohiVQV9iENxyZM
Downloads screenshot: http://screen/3QNNWn7ZusdeUSU
Bookmarks screenshot: http://screen/4PqfQQKNMDaCMsV

Bug: 1040957
Change-Id: Ib6d4371c84b40f8a74ee68bc545b25ce0d0c4b6b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2469663Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Reviewed-by: Regan Hsu <hsuregan@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Commit-Queue: Gavin Williams <gavinwill@chromium.org>
Cr-Commit-Position: refs/heads/master@{#818163}

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

@@ -38,6 +38,8 @@
 
       iron-icon {
         --iron-icon-fill-color: var(--cros-search-page-question-icon-color);
+        height: 16px;
+        width: 16px;
       }
 
       cr-policy-pref-indicator {

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

@@ -21,7 +21,9 @@
         --cr-toolbar-focused-min-height: 40px;
         --cr-toolbar-icon-container-size: 32px;
         --cr-toolbar-icon-margin: 8px 16px;
-        --cr-toolbar-search-field-narrow-mode-prompt-opacity: 0.7;
+        --cr-toolbar-search-field-icon-opacity: 1;
+        --cr-toolbar-search-field-narrow-mode-prompt-opacity: 1;
+        --cr-toolbar-search-field-prompt-opacity: 1;
         --cr-toolbar-search-icon-margin-inline-start: 16px;
         --cr-toolbar-query-exists-min-height:
             var(--cr-toolbar-focused-min-height);

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

@@ -19,10 +19,10 @@
         --cr-toolbar-search-field-border-radius: 4px;
         --cr-toolbar-search-field-input-text-color:
             var(--cros-text-color-secondary);
-        --cr-toolbar-search-field-input-icon-color:
-            var(--cros-text-color-secondary);
+        --cr-toolbar-search-field-input-icon-color: var(--google-grey-600);
         --cr-toolbar-search-field-input-bg-color:
             var(--cros-toolbar-bg-color);
+         --cr-toolbar-search-field-prompt-color: var(--google-grey-600);
         align-items: center;
         background-color: var(--cros-toolbar-bg-color);
         color: var(--cros-text-color-secondary);

ui/chromeos/colors/cros_colors.json5

@@ -193,7 +193,7 @@
     error_color: "$google_red_700",
     success_color: "$google_green_700",
 
-    search_page_question_icon_color: "$google_grey_500",
+    search_page_question_icon_color: "$google_grey_600",
     app_management_permission_icon_color: "$google_grey_600",
 
     user_icon_color_secondary: "rgb(210, 210, 212)",

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

@@ -50,7 +50,7 @@
       }
 
       #prompt {
-        --cr-toolbar-search-field-prompt-opacity: .7;
+        color: var(--cr-toolbar-search-field-prompt-color, white);
         opacity: 0;
       }
 
@@ -138,11 +138,11 @@
       }
 
       :host(:not([narrow]):not([showing-search])) #icon {
-        opacity: .7;
+        opacity: var(--cr-toolbar-search-field-icon-opacity, .7);
       }
 
       :host(:not([narrow])) #prompt {
-        opacity: var(--cr-toolbar-search-field-prompt-opacity);
+        opacity: var(--cr-toolbar-search-field-prompt-opacity, .7);
       }
 
       :host([narrow]) #prompt {