Tab Search: Close button hover and focus states UX audit

Screenshots

Hover:
https://drive.google.com/file/d/1xxvmhVfUMVn6gKTC5N2nNL9HrvyaPzKK/view

Focus:
https://drive.google.com/file/d/1AQoUfTUeKRyPhmlmb5CdnQLrvBFyQuZc/view

Bug: 1128599
Change-Id: Ia856b9e25b006fd5710ce2af8ca08ae7e2596740
Reviewed-on: https://chrome-internal-review.googlesource.com/c/chrome/browser/resources/tab_search/+/3303965Reviewed-by: John Lee <johntlee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#819627}

chrome/browser/resources/tab_search_merge/tab_search_item.html

@@ -15,6 +15,21 @@
 
   .button-container cr-icon-button {
     --cr-icon-button-fill-color: transparent;
+    border-radius: 50%;
+  }
+
+  .button-container cr-icon-button:hover {
+    background-color: rgba(var(--google-grey-900-rgb), 0.1);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .button-container cr-icon-button:hover {
+      background-color: rgba(var(--white-rgb), 0.1);
+    }
+  }
+
+  .button-container cr-icon-button:focus {
+    border: 2px solid rgba(var(--google-blue-600-rgb), 0.4);
   }
 
   .favicon {
@@ -68,6 +83,7 @@
 </div>
 <div class="button-container">
   <cr-icon-button id="closeButton" aria-label="[[ariaLabel_(data.title)]]"
-      iron-icon="mwb16:close" on-click="onItemClose_" title="$i18n{closeTab}">
+      disable-ripple iron-icon="mwb16:close" on-click="onItemClose_"
+      title="$i18n{closeTab}">
   </cr-icon-button>
 </div>

chrome/browser/resources/tab_search_merge/tab_search_page.html

@@ -5,6 +5,10 @@
   <title>Tab Search</title>
   <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
   <style>
+    html {
+      --white-rgb: 255, 255, 255;
+    }
+
     html,
     body {
       width: 320px;