Improve avatars in high contrast mode (#10427)

Author: krisstern

src/main/js/components/command-palette/models.js

@@ -19,7 +19,7 @@ export function LinkResult(params) {
       return `<a class="jenkins-command-palette__results__item" href="${xmlEscape(
         params.url,
       )}">
-        ${params.type === "image" ? `<img alt="${xmlEscape(params.label)}" class="jenkins-command-palette__results__item__icon" src="${params.icon}" />` : ""}
+        ${params.type === "image" ? `<img alt="${xmlEscape(params.label)}" class="jenkins-command-palette__results__item__icon jenkins-avatar" src="${params.icon}" />` : ""}
         ${params.type !== "image" ? `<div class="jenkins-command-palette__results__item__icon">${params.icon}</div>` : ""}
         ${xmlEscape(params.label)}
         ${params.isExternal ? Symbols.EXTERNAL_LINK : ""}

src/main/scss/components/_avatar.scss

@@ -1,8 +1,14 @@
 .jenkins-avatar {
   &[src] {
     border-radius: 100px;
-    outline: 1px solid color-mix(in sRGB, var(--text-color) 10%, transparent);
-    background: color-mix(in sRGB, var(--text-color) 5%, transparent);
-    outline-offset: -1px;
+    outline: var(--jenkins-border-width) solid
+      color-mix(in sRGB, var(--text-color-secondary) 10%, transparent);
+    background: color-mix(in sRGB, var(--text-color-secondary) 5%, transparent);
+    outline-offset: calc(var(--jenkins-border-width) * -1);
+    object-fit: cover;
+
+    @media (prefers-contrast: more) {
+      outline-color: var(--text-color);
+    }
   }
 }

src/main/scss/components/_command-palette.scss

@@ -186,14 +186,6 @@ $command-palette-background: color-mix(
           width: 1.25rem;
           height: 1.25rem;
         }
-
-        &[src] {
-          border-radius: 100px;
-          outline: 1px solid
-            color-mix(in sRGB, var(--text-color) 10%, transparent);
-          background: color-mix(in sRGB, var(--text-color) 5%, transparent);
-          outline-offset: -1px;
-        }
       }
 
       &__description {