Add hover effects to buttons

app/assets/stylesheets/avatars.css

@@ -24,9 +24,9 @@
       object-fit: cover;
     }
 
-    &:where(a):not(:active):hover {
-      @media (any-hover: hover) {
-        filter: brightness(0.7);
+    @media (any-hover: hover) {
+      &:where(a):hover {
+        filter: brightness(0.8);
       }
     }
   }

app/assets/stylesheets/base.css

@@ -34,6 +34,8 @@
   }
 
   :is(a, button, input, textarea, .switch, .btn) {
+    transition: 100ms ease-out;
+    transition-property: background-color, border-color, box-shadow, filter, outline;
     touch-action: manipulation;
 
     /* Keyboard navigation */
@@ -42,6 +44,13 @@
       outline: var(--focus-ring-size) solid var(--focus-ring-color);
       outline-offset: var(--focus-ring-offset);
     }
+
+    /* Default disabled styles */
+    &:where([disabled]) {
+      cursor: not-allowed;
+      opacity: 0.5;
+      pointer-events: none;
+    }
   }
 
   /* Hover
@@ -71,11 +80,6 @@
     &:focus:not(:focus-visible) {
       --outline-offset: 0;
     }
-
-    &:where([disabled]):not(:hover):not(:active) {
-      cursor: not-allowed;
-      filter: brightness(0.75);
-    }
   } */
 
   ::selection {

app/assets/stylesheets/buttons.css

@@ -26,6 +26,12 @@
       opacity var( --transition),
       scale var( --transition);
 
+    @media (any-hover: hover) {
+      &:hover {
+        filter: brightness(0.8);
+      }
+    }
+
     &[disabled],
     &:has([disabled]),
     [disabled] &[type=submit],
@@ -79,7 +85,7 @@
 
   .btn--negative {
     --btn-background: var(--color-negative);
-    --btn-border-color: var(--color-canvas);
+    --btn-border-color: var(--color-negative);
     --btn-color: var(--color-ink-inverted);
     --outline-color: var(--color-negative);
   }
@@ -144,6 +150,7 @@
 
     &:has(input:checked)  {
       --btn-background: var(--color-ink);
+      --btn-border-color: var(--color-ink);
       --btn-color: var(--color-ink-inverted);
       --outline-color: var(--color-ink);
 

app/assets/stylesheets/inputs.css

@@ -21,17 +21,8 @@
       -webkit-box-shadow: 0 0 0px 1000px var(--color-selected) inset;
     }
 
-    &:where(:not(:active)):focus {
-      --input-border-color: var(--color-selected-dark);
-      --hover-color: var(--color-selected-dark);
-      --outline-size: 0;
-      --outline-color: transparent;
-
-      box-shadow: 0 0 0 var(--hover-size) var(--hover-color);
-    }
-
-    &:where([disabled]):not(:hover):not(:active) {
-      filter: none;
+    &:where(:focus) {
+      --focus-ring-offset: -1px;
     }
   }
 

app/views/accounts/settings/_users.html.erb

@@ -7,7 +7,7 @@
       <input placeholder="Filter…" class="input input--transparent full-width" type="search" autocorrect="off" autocomplete="off" data-1p-ignore="true" data-filter-target="input" data-action="input->filter#filter">
     </div>
 
-    <div data-filter-target="list" class="users-list flex flex-column gap">
+    <div data-filter-target="list" class="users-list">
       <%= render partial: "accounts/user", collection: users %>
     </div>
   </div>