User Manager / Settings, Change Picture: re-add avatar focus borders

Screencast: https://drive.google.com/open?id=11JgUXbqgQJJViZsNC35v98zOwRVs5Ymh

R=rbpotter@chromium.org
BUG=939731

Change-Id: I5df51c152163f9995316ef5a706c56d3e9c5dc40
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1540409
Auto-Submit: Dan Beam <dbeam@chromium.org>
Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Cr-Commit-Position: refs/heads/master@{#644676}

ui/webui/resources/cr_elements/cr_profile_avatar_selector/cr_profile_avatar_selector.html

@@ -18,35 +18,48 @@
       }
 
       #avatar-grid .avatar {
-        background-color: var(--paper-grey-300);
+        --avatar-focus-color: var(--google-grey-refresh-700);
+        --avatar-gap-color: white;
+        --avatar-gap-width: 2px;
+        --avatar-selected-color: var(--google-blue-500);
+
         background-position: center;
         background-repeat: no-repeat;
-        border: 1px solid rgba(0, 0, 0, .12);
+        border: 1px solid var(--paper-grey-300);
         border-radius: 100%;
+        box-shadow: 0 0 0 var(--avatar-gap-width) var(--avatar-gap-color),
+            0 0 0 calc(var(--avatar-gap-width) + var(--avatar-outline-width))
+                var(--avatar-outline-color);
         display: flex;
         height: var(--avatar-size);
         margin: calc(var(--avatar-spacing) / 2);
         min-width: 0;
         padding: 0;
+        transition: none !important;  /* Polymer's :host([animated]) rule. */
         width: var(--avatar-size);
 
         @apply --avatar-selector-avatar;
       }
 
-      #avatar-grid .avatar.keyboard-focus {
-        background-color: var(--paper-grey-400);
+      :host-context([dark]) #avatar-grid .avatar {
+        --avatar-focus-color: var(--google-grey-refresh-500);
+        --avatar-gap-color: var(--google-grey-800);
+        --avatar-selected-color: var(--google-blue-refresh-300);
       }
 
       #avatar-grid .avatar.iron-selected {
-        border: 2px solid var(--google-blue-500);
+        --avatar-outline-color: var(--avatar-selected-color);
+        --avatar-outline-width: 2px !important;  /* Overrides rule below. */
+        border-color: var(--avatar-selected-color);
       }
 
-      paper-button {
-        background-size: var(--avatar-size);
+      #avatar-grid .avatar.keyboard-focus {
+        --avatar-outline-color: var(--avatar-focus-color);
+        --avatar-outline-width: 1px;
       }
 
-      :host-context([dark]) #avatar-grid .avatar.iron-selected {
-        border-color: var(--google-blue-refresh-300);
+      paper-button {
+        background-size: var(--avatar-size);
       }
     </style>
     <cr-profile-avatar-selector-grid id="avatar-grid"