Remove redundant classes and styles for avatars

app/assets/stylesheets/avatars.css

@@ -1,29 +1,26 @@
 @layer components {
   .avatar {
     --avatar-border-radius: 50%;
+    --avatar-size-default: 5ch;
 
     aspect-ratio: 1;
-    block-size: var(--avatar-size, 5ch);
+    block-size: var(--avatar-size, var(--avatar-size-default));
     border-radius: var(--avatar-border-radius);
     display: grid;
-    inline-size: var(--avatar-size, 5ch);
+    flex-shrink: 0;
+    inline-size: var(--avatar-size, var(--avatar-size-default));
     margin: 0;
     place-items: center;
 
-    img,
-    .icon {
+    :is(img, .icon) {
       aspect-ratio: 1;
       block-size: auto;
       border-radius: var(--avatar-border-radius);
       grid-area: 1/1;
-      inline-size: var(--avatar-size, 5ch);
+      inline-size: var(--avatar-size, var(--avatar-size-default));
       max-inline-size: 100%;
       object-fit: cover;
     }
-
-    .card & + .avatar {
-      margin-inline-start: -0.8em;
-    }
   }
 
   .avatar__form {

app/assets/stylesheets/base.css

@@ -37,12 +37,17 @@
   }
 
   :is(a, button, input, textarea, .switch, .btn) {
-    --outline-size: max(2px, 0.08em);
+    --outline-size: 2px;
 
     caret-color: var(--color-link);
     text-decoration: none;
     touch-action: manipulation;
-    transition: box-shadow 150ms ease, outline-offset 150ms ease, background-color 150ms ease, opacity 150ms ease, filter 150ms ease;
+    transition:
+      box-shadow 150ms ease,
+      outline-offset 150ms ease,
+      background-color 150ms ease,
+      opacity 150ms ease,
+      filter 150ms ease;
 
     /* Hover */
     @media (any-hover: hover) {
@@ -53,8 +58,8 @@
 
     /* Keyboard navigation */
     &:where(:not(:active)):focus-visible {
-      outline-width: var(--outline-size);
       outline-color: var(--outline-color, currentColor);
+      outline-width: var(--outline-size);
       outline-offset: var(--outline-offset, calc(var(--outline-size) * 2));
     }
 

app/assets/stylesheets/buttons.css

@@ -1,7 +1,7 @@
 @layer components {
   .btn {
     --transition: 150ms ease;
-    --btn-border-radius: 2em;
+    --btn-border-radius: 99rem;
 
     align-items: center;
     background-color: var(--btn-background, var(--color-canvas));
@@ -34,12 +34,12 @@
     }
 
     &:where(.avatar) {
-      --btn-border-radius: var(--avatar-border-radius);
+      /* --btn-border-radius: var(--avatar-border-radius); */
       --btn-padding: 0;
       --btn-border-size: 0;
       --hover-size: 0;
 
-      aspect-ratio: 1;
+      /* aspect-ratio: 1; */
       block-size: var(--btn-size);
       display: grid;
       inline-size: var(--btn-size);
@@ -134,23 +134,8 @@
     }
   }
 
-  /* Variants */
-  .btn--link {
-    --btn-background: var(--color-link);
-    --btn-color: var(--color-ink-inverted);
-    --outline-color: var(--color-link);
-  }
-
-  .btn--negative {
-    --btn-background: var(--color-negative);
-    --btn-color: var(--color-ink-inverted);
-    --outline-color: var(--color-negative);
-  }
-
-  .btn--placeholder {
-    pointer-events: none;
-    visibility: hidden;
-  }
+  /* Variants
+  /* ------------------------------------------------------------------------ */
 
   .btn--plain {
     --btn-background: transparent;
@@ -163,26 +148,27 @@
     --outline-size: 0;
   }
 
+  .btn--link {
+    --btn-background: var(--color-link);
+    --btn-border-color: var(--color-canvas);
+    --btn-color: var(--color-ink-inverted);
+    --outline-color: var(--color-link);
+  }
+
+  .btn--negative {
+    --btn-background: var(--color-negative);
+    --btn-border-color: var(--color-canvas);
+    --btn-color: var(--color-ink-inverted);
+    --outline-color: var(--color-negative);
+  }
+
   .btn--positive {
     --btn-background: var(--color-positive);
+    --btn-border-color: var(--color-canvas);
     --btn-color: var(--color-ink-inverted);
     --outline-color: var(--color-positive);
   }
 
-  .btn--remove {
-    --btn-icon-size: 0.7em;
-  }
-
-  .btn--reversed {
-    --btn-background: var(--color-ink);
-    --btn-color: var(--color-canvas);
-    --outline-color: var(--color-ink);
-  }
-
-  :is(.btn--link, .btn--negative, .btn--positive, .btn--reversed) {
-    --btn-border-color: var(--color-canvas);
-  }
-
   .btn--success {
     --success-timing-function: cubic-bezier(0.25, 1.25, 0.5, 1);
     animation: success 1s var(--success-timing-function);
@@ -192,6 +178,26 @@
     }
   }
 
+  /* Fake button used to help space things out */
+  .btn--placeholder {
+    pointer-events: none;
+    visibility: hidden;
+  }
+
+  .btn--remove {
+    --btn-icon-size: 0.7em;
+  }
+
+  .btn--reversed {
+    --btn-background: var(--color-ink);
+    --btn-border-color: var(--color-canvas);
+    --btn-color: var(--color-canvas);
+    --outline-color: var(--color-ink);
+  }
+
+  /* Button groups
+  /* ------------------------------------------------------------------------ */
+
   .btn__group {
     .btn {
       --btn-border-radius: 0;

app/assets/stylesheets/card-columns.css

@@ -164,16 +164,12 @@
     }
 
     .card {
+      --avatar-size: 2.75em;
       --text-xx-large: 1.6em;
       --text-small: 1.1em;
 
       background-color: var(--color-canvas);
       line-height: 1.2;
-
-      .avatar {
-        block-size: 2.75em;
-        inline-size: 2.75em;
-      }
     }
 
     .card__body {

app/assets/stylesheets/cards.css

@@ -3,6 +3,7 @@
   /* -------------------------------------------------------------------------- */
 
   .card {
+    --avatar-size: 2.75em;
     --card-padding-inline: var(--inline-space-double);
     --card-padding-block: var(--block-space);
     --border-color: transparent;
@@ -22,10 +23,6 @@
     text-align: start;
     z-index: 1;
 
-    .avatar {
-      --avatar-size: 2.75em;
-    }
-
     @media (prefers-color-scheme: dark) {
       box-shadow: 0 0 0 1px var(--color-ink-lighter);
     }
@@ -221,6 +218,12 @@
     padding-inline-end: var(--inline-space);
   }
 
+  .card__footer {
+    .avatar + .avatar {
+      margin-inline-start: -0.8em;
+    }
+  }
+
   .card__meta {
      --border: 1px solid var(--card-color);
 

app/assets/stylesheets/inputs.css

@@ -76,7 +76,6 @@
     }
 
     &:is(.avatar) {
-      img,
       input[type="file"] {
         border-radius: 50%;
       }

app/assets/stylesheets/search.css

@@ -107,6 +107,7 @@
   }
 
   .search__excerpt--comment {
+    --avatar-size: var(--comment-avatar-size);
     --comment-avatar-size: 32px;
     --padding: 1ch;
 
@@ -118,9 +119,6 @@
     padding-block: 0.5ch;
 
     .avatar {
-      --avatar-size: var(--comment-avatar-size);
-
-      background: tomato;
       margin-left: calc(-0.5 * var(--comment-avatar-size));
     }
   }

app/assets/stylesheets/users.css

@@ -1,4 +1,9 @@
 .users-list {
   max-block-size: 40dvh;
   overflow: auto;
+  padding-block: 1ch;
+
+  li + li {
+    margin-block-start: 1ch;
+  }
 }

app/helpers/avatars_helper.rb

@@ -11,7 +11,7 @@ module AvatarsHelper
   end
 
   def avatar_tag(user, hidden_for_screen_reader: false, **options)
-    link_to user_path(user), class: "btn avatar", data: { turbo_frame: "_top" },
+    link_to user_path(user), class: "avatar btn", data: { turbo_frame: "_top" },
       aria: { hidden: hidden_for_screen_reader, label: user.name },
       tabindex: hidden_for_screen_reader ? -1 : nil do
       avatar_image_tag(user, **options)
@@ -27,6 +27,6 @@ module AvatarsHelper
   end
 
   def avatar_image_tag(user, **options)
-    image_tag user_avatar_path(user), aria: { hidden: "true" }, size: 48, title: user.name, class: ("avatar__photo" if user.avatar.attached?), **options
+    image_tag user_avatar_path(user), aria: { hidden: "true" }, size: 48, title: user.name, **options
   end
 end

app/views/accounts/_user.html.erb

@@ -1,5 +1,5 @@
 <li class="flex align-center gap-half pad-inline" data-filter-target="item" data-value="<%= user.name.downcase %>">
-  <%= avatar_tag user, class: "flex-item-no-shrink" %>
+  <%= avatar_tag user %>
 
   <strong class="overflow-ellipsis">
     <%= link_to user.name, user, class: "txt-ink btn btn--plain" %>

app/views/cards/display/common/_assignees.html.erb

@@ -1,6 +1,6 @@
 <div class="flex" id="<%= dom_id(card, :assignees) %>">
   <% card.assignees.each do |assignee| %>
-    <%= avatar_tag assignee, class: "avatar" %>
+    <%= avatar_tag assignee %>
   <% end %>
 
   <div class="position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside" <%= "hidden" if card.closed? %>>

app/views/cards/display/mini/_assignees.html.erb

@@ -1,7 +1,7 @@
 <%= turbo_frame_tag card, :assignees do %>
   <div class="flex">
     <% card.assignees.each do |assignee| %>
-      <%= avatar_tag assignee, class: "avatar" %>
+      <%= avatar_tag assignee %>
     <% end %>
   </div>
 <% end %>

app/views/cards/display/public_preview/_meta.html.erb

@@ -24,7 +24,7 @@
   <div class="margin-inline-start flex-item-no-shrink">
     <div class="flex" id="<%= dom_id(card, :assignees) %>">
       <% card.assignees.each do |assignee| %>
-        <%= avatar_preview_tag assignee, class: "avatar" %>
+        <%= avatar_preview_tag assignee %>
       <% end %>
 
       <div class="position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside" <%= "hidden" if card.closed? %>>

app/views/collections/_access_toggle.erb

@@ -1,7 +1,5 @@
 <li class="flex align-center gap-half margin-none unpad txt-normal" data-filter-target="item" data-value="<%= user.name.downcase %>">
-  <figure class="avatar flex-item-no-shrink">
-    <%= avatar_tag user %>
-  </figure>
+  <%= avatar_tag user %>
 
   <div class="min-width">
     <div class="overflow-ellipsis">

app/views/collections/edit/_users.html.erb

@@ -1,7 +1,7 @@
 <section class="margin-block fill-shade border-radius">
   <%= access_menu_tag collection do %>
     <li class="flex align-center gap pad unpad-block-end txt-normal">
-      <figure class="avatar flex-item-no-shrink" style="--avatar-border-radius: 0; --avatar-size: 3.5ch; margin-inline: 0.3em;">
+      <figure class="avatar" style="--avatar-border-radius: 0; --avatar-size: 3.5ch; margin-inline: 0.3em;">
         <%= icon_tag "everyone" %>
         <span class="for-screen-reader">Everyone</span>
       </figure>

app/views/events/event/_layout.html.erb

@@ -21,7 +21,7 @@
   </div>
   <div class="event__content">
     <div class="flex align-start gap">
-      <div class="avatar txt-x-small flex-item-no-shrink">
+      <div class="avatar txt-x-small">
         <%= avatar_image_tag(event.creator) %>
       </div>
 

app/views/notifications/_notification.html.erb

@@ -6,7 +6,7 @@
     </header>
 
     <div class="card__body">
-      <div class="avatar txt-x-small flex-item-no-shrink">
+      <div class="avatar txt-x-small">
         <%= avatar_image_tag notification.creator %>
       </div>
 

app/views/users/show.html.erb

@@ -16,7 +16,7 @@
 <div class="panel shadow center txt-align-center margin-block-end-double">
   <div class="flex flex-column gap">
     <div class="avatar txt-xx-large center fill-white">
-      <%= image_tag user_avatar_path(@user), alt: "Profile avatar for #{@user.name}", class: "avatar", size: 128 %>
+      <%= image_tag user_avatar_path(@user), alt: "Profile avatar for #{@user.name}", size: 128 %>
     </div>
 
     <div class="flex flex-column gap-half margin-block-end">