From f901f1a82a3f098d2c88afabfacb6f6d0c5118d9 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Tue, 1 Jul 2025 16:33:45 -0500
Subject: [PATCH] Handle dark mode

---
 app/assets/stylesheets/buttons.css    | 12 +++++++++++-
 app/assets/stylesheets/card-perma.css |  5 +++--
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/buttons.css b/app/assets/stylesheets/buttons.css
index 3ee2b1af6..885d296a3 100644
--- a/app/assets/stylesheets/buttons.css
+++ b/app/assets/stylesheets/buttons.css
@@ -2,6 +2,7 @@
   .btn {
     --icon-size: var(--btn-icon-size, 1.3em);
     --btn-border-radius: 99rem;
+    --btn-hover-brightness: 0.9;
 
     align-items: center;
     background-color: var(--btn-background, var(--color-canvas));
@@ -22,10 +23,14 @@
 
     @media (any-hover: hover) {
       &:hover {
-        filter: brightness(0.85);
+        filter: brightness(var(--btn-hover-brightness));
       }
     }
 
+    @media (prefers-color-scheme: dark) {
+      --btn-hover-brightness: 1.5;
+    }
+
     &[disabled],
     &:has([disabled]),
     [disabled] &[type=submit],
@@ -114,7 +119,12 @@
     --btn-background: var(--color-ink);
     --btn-border-color: var(--color-canvas);
     --btn-color: var(--color-canvas);
+    --btn-hover-brightness: 2;
     --outline-color: var(--color-ink);
+
+    @media (prefers-color-scheme: dark) {
+      --btn-hover-brightness: 0.8;
+    }
   }
 
   /* Toggleable buttons
diff --git a/app/assets/stylesheets/card-perma.css b/app/assets/stylesheets/card-perma.css
index 9a4de11ed..13933d9da 100644
--- a/app/assets/stylesheets/card-perma.css
+++ b/app/assets/stylesheets/card-perma.css
@@ -48,10 +48,10 @@
 
     .collection-picker__button {
       --btn-border-size: 0;
-    
+
       font-size: 0.5em;
       margin-inline-start: 1ch;
-  
+
       + .panel {
         --panel-size: 18ch;
       }
@@ -152,6 +152,7 @@
 
       &:has(input:checked)  {
         --btn-background: var(--card-color);
+        --btn-border-color: var(--card-color);
         --btn-color: var(--color-ink-inverted);
       }
     }