From 9250c19e94bd0a6fb397cf4b069b7943c13231d9 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Tue, 1 Jul 2025 16:58:57 -0500
Subject: [PATCH] Hover effect for collection picker on cards

---
 app/assets/stylesheets/cards.css      | 11 +++++++++++
 app/assets/stylesheets/fizzy-menu.css |  9 ++++++++-
 app/assets/stylesheets/workflows.css  |  4 ++--
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index 9595b98ee..8700aa23f 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -64,6 +64,17 @@
     max-inline-size: 100%;
     min-inline-size: 0;
     padding: var(--block-space-half) var(--inline-space) var(--block-space-half) var(--card-padding-inline);
+
+    &:has(.collection-picker__button) {
+      cursor: pointer;
+      transition: background-color: 100ms ease-out;
+
+      @media (any-hover: hover) {
+        &:hover {
+          background-color: color-mix(in srgb, var(--card-color) 90%, var(--color-ink));
+        }
+      }
+    }
   }
 
   .card__collection-name {
diff --git a/app/assets/stylesheets/fizzy-menu.css b/app/assets/stylesheets/fizzy-menu.css
index bead9d38a..fa29fe8b6 100644
--- a/app/assets/stylesheets/fizzy-menu.css
+++ b/app/assets/stylesheets/fizzy-menu.css
@@ -14,12 +14,19 @@
     --input-border-color: var(--color-selected-dark);
     --input-padding: 0.2em 2em 0.2em 0.9em;
 
+    background-color: var(--color-canvas);
     box-shadow: 0 0 0 1px oklch(var(--lch-blue-medium) / 5%),
                 0 0.2em 0.2em oklch(var(--lch-blue-medium) / 5%),
                 0 0.4em 0.4em oklch(var(--lch-blue-medium) / 5%),
                 0 0.8em 0.8em oklch(var(--lch-blue-medium) / 5%);
     margin-block-start: 0.1em;
 
+    @media (any-hover: hover) {
+      &:hover {
+        filter: brightness(0.9);
+      }
+    }
+
     svg {
       block-size: auto;
       inline-size: 1.1em;
@@ -69,4 +76,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/app/assets/stylesheets/workflows.css b/app/assets/stylesheets/workflows.css
index 2486b99fa..986a1f4f8 100644
--- a/app/assets/stylesheets/workflows.css
+++ b/app/assets/stylesheets/workflows.css
@@ -11,7 +11,7 @@
 
     @media (hover: hover) {
       &:hover {
-        background-color: color(from var(--card-color) srgb r g b / 0.15);
+        --btn-background: color(from var(--card-color) srgb r g b / 0.15);
       }
     }
   }
@@ -23,7 +23,7 @@
 
     @media (hover: hover) {
       &:hover {
-        background-color: color(from var(--card-color) srgb r g b / 0.65);
+        --btn-background: var(--card-color);
       }
     }
   }