[b4p] Make settings "move password" dialog consistent with native bubble

crrev.com/c/2470524 made some changes to the UI of the bubble used to
offer moving a password to the account. This CL applies the same changes
to its corresponding dialog in chrome://settings/passwords/device. The
changes are:

- Replacing the favicon elevation with a 1px border. The border is
separated from the inner favicon by a 3px padding.
- The borders of the avatar, favicon and computer icon share the same
color, which is different in dark mode.
- The favicon background changes color when in dark mode.

Screenshots can be found here crbug.com/1100814#c20.

Bug: 1100814
Change-Id: I05d4e5677f2fa6f4f52e70c1fdfbd38f0fa33ebe
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2514207Reviewed-by: Jan Wilken Dörrie <jdoerrie@chromium.org>
Reviewed-by: Friedrich [CET] <fhorschig@chromium.org>
Commit-Queue: Victor Vianna <victorvianna@google.com>
Cr-Commit-Position: refs/heads/master@{#823495}

chrome/browser/resources/settings/autofill_page/password_move_to_account_dialog.html

@@ -3,11 +3,21 @@
       --computer-icon-padding-top: 11px;
       --computer-icon-padding-bottom: 10px;
       --computer-icon-padding-sides: 8px;
-      --hairline-border: 1px;
-      --hairline-color : var(--google-grey-200);
+      /* Same opacity as the native bubble, where the Skia range is 0-255.*/
+      --hairline-opacity: calc(96/255);
+      --hairline-width: 1px;
+      --hairline-color :
+          rgba(var(--google-grey-700-rgb), var(--hairline-opacity));
       --outer-icon-size: 48px;
    }
 
+   @media (prefers-color-scheme: dark) {
+    :host {
+      --hairline-color:
+          rgba(var(--google-grey-500-rgb), var(--hairline-opacity))
+    }
+  }
+
   cr-dialog::part(body-container) {
     height: 124px;
   }
@@ -19,21 +29,21 @@
   }
 
   settings-avatar-icon {
-    border: var(--hairline-border) solid var(--hairline-color);
+    border: var(--hairline-width) solid var(--hairline-color);
     border-radius: 50%;
     display: flex;
     flex-shrink: 0;
-    height: calc(var(--outer-icon-size) - 2 * var(--hairline-border));
-    width: calc(var(--outer-icon-size) - 2 * var(--hairline-border));
+    height: calc(var(--outer-icon-size) - 2 * var(--hairline-width));
+    width: calc(var(--outer-icon-size) - 2 * var(--hairline-width));
   }
 
   #computerIcon {
-    --iron-icon-height: calc(var(--outer-icon-size) - 2 * var(--hairline-border)
+    --iron-icon-height: calc(var(--outer-icon-size) - 2 * var(--hairline-width)
         - var(--computer-icon-padding-top)
         - var(--computer-icon-padding-bottom));
-    --iron-icon-width: calc(var(--outer-icon-size) - 2 * var(--hairline-border)
+    --iron-icon-width: calc(var(--outer-icon-size) - 2 * var(--hairline-width)
         - 2 * var(--computer-icon-padding-sides));
-    border: var(--hairline-border) solid var(--hairline-color);
+    border: var(--hairline-width) solid var(--hairline-color);
     border-radius: 50%;
     flex-shrink: 0;
     padding-bottom: var(--computer-icon-padding-bottom);
@@ -43,13 +53,21 @@
   }
 
   site-favicon {
+    background-color: white;
+    border: var(--hairline-width) solid var(--hairline-color);
     border-radius: 50%;
     bottom: 0;
-    box-shadow: var(--cr-elevation-1);
+    padding: 2px;
     position: absolute;
     right: 0;
   }
 
+  @media (prefers-color-scheme: dark) {
+    site-favicon {
+      background-color: var(--google-grey-900-white-4-percent);
+    }
+  }
+
   .cr-row {
     display: flex;
     justify-content: center;