Change avatars border radius (#31390)

app/javascript/styles/mastodon/admin.scss

@@ -697,7 +697,7 @@ body,
     top: 15px;
 
     .avatar {
-      border-radius: 4px;
+      border-radius: var(--avatar-border-radius);
       width: 40px;
       height: 40px;
     }
@@ -748,7 +748,7 @@ body,
     top: 15px;
 
     .avatar {
-      border-radius: 4px;
+      border-radius: var(--avatar-border-radius);
       width: 40px;
       height: 40px;
     }
@@ -1595,7 +1595,7 @@ a.sparkline {
       position: absolute;
       inset-inline-start: 15px;
       top: 15px;
-      border-radius: 4px;
+      border-radius: var(--avatar-border-radius);
       width: 40px;
       height: 40px;
     }

app/javascript/styles/mastodon/components.scss

@@ -1996,13 +1996,14 @@ body > [data-popper-placement] {
 .account__avatar {
   display: block;
   position: relative;
+  border-radius: var(--avatar-border-radius);
 
   img {
     display: block;
     width: 100%;
     height: 100%;
     object-fit: cover;
-    border-radius: 4px;
+    border-radius: var(--avatar-border-radius);
   }
 
   &-inline {
@@ -7975,7 +7976,7 @@ noscript {
       .account__avatar {
         background: var(--background-color);
         border: 1px solid var(--background-border-color);
-        border-radius: 4px;
+        border-radius: var(--avatar-border-radius);
       }
     }
   }

app/javascript/styles/mastodon/containers.scss

@@ -81,7 +81,7 @@
       height: 100%;
       display: block;
       margin: 0;
-      border-radius: 4px;
+      border-radius: var(--avatar-border-radius);
     }
   }
 

app/javascript/styles/mastodon/forms.scss

@@ -312,7 +312,7 @@ code {
       margin-bottom: 10px;
       max-width: 100%;
       height: auto;
-      border-radius: 4px;
+      border-radius: var(--avatar-border-radius);
       background: url('images/void.png');
 
       &[src$='missing.png'] {

app/javascript/styles/mastodon/variables.scss

@@ -108,4 +108,5 @@ $font-monospace: 'mastodon-font-monospace' !default;
   --surface-background-color: #{darken($ui-base-color, 4%)};
   --surface-variant-background-color: #{$ui-base-color};
   --surface-variant-active-background-color: #{lighten($ui-base-color, 4%)};
+  --avatar-border-radius: 8px;
 }