From d8bdbc9a65710eacb26f9e8e17ac84adb0fef9ff Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Thu, 18 Sep 2025 13:10:58 -0500
Subject: [PATCH] WIP: Touch up considering BG in dark mode

---
 app/assets/stylesheets/_global.css      |  2 ++
 app/assets/stylesheets/card-columns.css | 19 +++++++++++++++----
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/_global.css b/app/assets/stylesheets/_global.css
index ee4134b81..64d2afa66 100644
--- a/app/assets/stylesheets/_global.css
+++ b/app/assets/stylesheets/_global.css
@@ -325,6 +325,8 @@
     --color-terminal-bg: var(--color-canvas);
     --color-terminal-text-light: oklch(var(--lch-green-dark));
     --color-golden: oklch(var(--lch-blue-light));
+    --color-golden: oklch(50% 0.178 95.7);
+    --color-golden: oklch(var(--lch-yellow-light));
 
     --shadow: 0 0 0 1px oklch(var(--lch-black) / 0.42),
               0 .2em 1.6em -0.8em oklch(var(--lch-black) / 0.6),
diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css
index 3c85d3517..b957cef0f 100644
--- a/app/assets/stylesheets/card-columns.css
+++ b/app/assets/stylesheets/card-columns.css
@@ -178,11 +178,13 @@
   /* ------------------------------------------------------------------------ */
 
   .cards--considering {
+    --gradient-opacity: 25%;
+
     background-color: var(--color-canvas);
     background-image: linear-gradient(90deg,
       transparent 0%,
-      color-mix(in srgb, var(--color-considering) 25%, transparent) 33%,
-      color-mix(in srgb, var(--color-considering) 25%, transparent) 66%,
+      color-mix(in srgb, var(--color-considering) var(--gradient-opacity), transparent) 33%,
+      color-mix(in srgb, var(--color-considering) var(--gradient-opacity), transparent) 66%,
       transparent 100%);
     padding-block-start: 2em;
 
@@ -206,12 +208,17 @@
       padding-inline: var(--cards-gap);
     }
 
+    @media (prefers-color-scheme: dark) {
+      --gradient-opacity: 15%;
+    }
+
     .cards__decoration {
+      --gradient-opacity: 30%;
       --size: 4.25em;
 
       background-color: var(--color-canvas);
       background-image: radial-gradient(ellipse at bottom,
-        color-mix(in srgb, var(--color-considering) 30%, transparent) 0%,
+        color-mix(in srgb, var(--color-considering) var(--gradient-opacity), transparent) 0%,
         transparent 70%);
       block-size: var(--size);
       inline-size: 100%;
@@ -219,10 +226,14 @@
       position: absolute;
       z-index: -1;
 
+      @media (prefers-color-scheme: dark) {
+        --gradient-opacity: 20%;
+      }
+
       @supports(mask: radial-gradient(black)) {
         &:before {
           background: radial-gradient(ellipse at bottom,
-            color-mix(in srgb, var(--color-considering) 30%, transparent) 0%,
+            color-mix(in srgb, var(--color-considering) var(--gradient-opacity), transparent) 0%,
             transparent 70%);
           content: "";
           inset: 0;