From 68906321e8e8f32cd7ac957af61b8721bbf3b83f Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Fri, 30 May 2025 13:11:36 -0500
Subject: [PATCH] Card shadow tweaks

---
 app/assets/stylesheets/_global.css        | 12 +++++-------
 app/assets/stylesheets/card-columns.css   | 17 ++++++++++++++++-
 app/assets/stylesheets/cards.css          | 21 +++++----------------
 app/views/cards/display/_preview.html.erb |  2 +-
 4 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/app/assets/stylesheets/_global.css b/app/assets/stylesheets/_global.css
index 5b2a966af..6861d229e 100644
--- a/app/assets/stylesheets/_global.css
+++ b/app/assets/stylesheets/_global.css
@@ -23,12 +23,10 @@
   --border: 1px solid var(--color-ink-lighter);
 
   /* Shadows */
-  --shadow: 0 0 0 1px oklch(var(--lch-black) / 0.02),
-            0 .2em 1.6em -0.8em oklch(var(--lch-black) / 0.2),
-            0 .4em 2.4em -1em oklch(var(--lch-black) / 0.3),
-            0 .4em .8em -1.2em oklch(var(--lch-black) / 0.4),
-            0 .8em 1.2em -1.6em oklch(var(--lch-black) / 0.5),
-            0 1.2em 1.6em -2em oklch(var(--lch-black) / 0.6);
+  --shadow: 0 0 0 1px oklch(var(--lch-black) / 5%),
+            0 0.2em 0.2em oklch(var(--lch-black) / 5%),
+            0 0.4em 0.4em oklch(var(--lch-black) / 5%),
+            0 0.8em 0.8em oklch(var(--lch-black) / 5%);
 
   /* Components */
   --btn-size: 2.65em;
@@ -186,7 +184,7 @@
   --color-code-token__punctuation: oklch(var(--lch-ink-dark));
   --color-code-token__selector: oklch(var(--lch-green-dark));
   --color-code-token__variable: oklch(var(--lch-red-dark));
-  
+
 
   @media (prefers-color-scheme: dark) {
     --lch-canvas: 20% 0.0195 232.58;
diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css
index 108e7fd19..692efdf5d 100644
--- a/app/assets/stylesheets/card-columns.css
+++ b/app/assets/stylesheets/card-columns.css
@@ -101,7 +101,6 @@
       --text-small: 1.1em;
 
       background-color: var(--color-canvas);
-      box-shadow: 0 0 0 1px var(--color-ink-lighter);
       line-height: 1.2;
 
       .avatar {
@@ -122,6 +121,22 @@
       display: none;
     }
 
+    .card__collection {
+      background-color: var(--color-canvas);
+      color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
+      padding: 0 0 0 var(--inline-space);
+    }
+
+    .card__collection-name {
+      border-inline-start: 1px solid color-mix(in srgb, var(--color-ink) 33%, var(--color-canvas));
+      color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
+    }
+
+    .card__header {
+      color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
+      margin: 0 0 calc(-0.5 * var(--card-padding-inline)) 0;
+    }
+
     .card__title {
       margin-block-start: 0.1em;
       min-block-size: 0;
diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index 53315b8a6..bb74bc503 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -25,6 +25,10 @@
     .avatar {
       --avatar-size: 2.75em;
     }
+
+    @media (prefers-color-scheme: dark) {
+      box-shadow: 0 0 0 1px var(--color-ink-lighter);
+    }
   }
 
   /* Children
@@ -69,11 +73,6 @@
     margin-block-start: calc(-1 * var(--card-padding-block));
     margin-inline-start: calc(-1 * var(--card-padding-inline));
     min-inline-size: 0;
-
-    .cards--considering & {
-      color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
-      margin: 0 0 calc(-0.5 * var(--card-padding-inline)) 0;
-    }
   }
 
   .card__collection {
@@ -83,12 +82,6 @@
     font-weight: 800;
     padding: var(--block-space-half) var(--inline-space) var(--block-space-half) var(--inline-space-double);
     text-transform: uppercase;
-
-    .cards--considering & {
-      background-color: var(--color-canvas);
-      color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
-      padding: 0 0 0 var(--inline-space);
-    }
   }
 
   .card__id {
@@ -107,11 +100,6 @@
     display: inline-flex;
     margin-inline-start: var(--inline-space-half);
     padding-inline-start: calc(var(--inline-space) * 0.75);
-
-    .cards--considering & {
-      border-inline-start: 1px solid color-mix(in srgb, var(--color-ink) 33%, var(--color-canvas));
-      color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
-    }
   }
 
   .card__tags {
@@ -211,6 +199,7 @@
     box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-link) 20%, var(--color-canvas));
     color: var(--btn-color);
     font-weight: 700;
+    transition: none;
   }
 
   .card__move-button {
diff --git a/app/views/cards/display/_preview.html.erb b/app/views/cards/display/_preview.html.erb
index 4bdccb6bb..eadeadaba 100644
--- a/app/views/cards/display/_preview.html.erb
+++ b/app/views/cards/display/_preview.html.erb
@@ -6,7 +6,7 @@
           <span class="card__collection">
             <span class="card__id"><%= card.id %></span>
             <%= link_to card.collection.name, cards_path(collection_ids: [ card.collection ]),
-                  class: "card__collection-name txt-uppercase overflow-ellipsis" %>
+                  class: "card__collection-name overflow-ellipsis" %>
           </span>
           <%= render "cards/display/preview/tags", card: card %>
         </header>