From 3854d1e27e8fa43f45a80a8ae9c7bb2b026dbadc Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Wed, 14 May 2025 15:44:27 -0500
Subject: [PATCH] Bubble matches card color

---
 app/assets/stylesheets/bubble.css | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/bubble.css b/app/assets/stylesheets/bubble.css
index e7af36acb..5ff41f248 100644
--- a/app/assets/stylesheets/bubble.css
+++ b/app/assets/stylesheets/bubble.css
@@ -1,12 +1,12 @@
 @layer components {
   .bubble {
-    --bubble-color: radial-gradient(oklch(var(--lch-blue-medium) / 10%) 50%, oklch(var(--lch-blue-medium) / 50%) 100%);
+    --bubble-color: var(--card-color, oklch(var(--lch-blue-medium)));
     --bubble-shape: 54% 46% 61% 39% / 57% 49% 51% 43%;
     --bubble-rotate: 0deg;
     --bubble-size-default: 4rem;
 
     block-size: var(--bubble-size, var(--bubble-size-default));
-    color: oklch(var(--lch-blue-darkest));
+    color: var(--color-ink);
     container-type: inline-size;
     font-size: 1.75rem;
     font-weight: bold;
@@ -16,12 +16,16 @@
     inset-block-start: 50%;
 
     &:before {
-      background: var(--bubble-color);
+      background: radial-gradient(
+        color-mix(in srgb, var(--bubble-color) 8%, var(--color-canvas)) 50%,
+        color-mix(in srgb, var(--bubble-color) 48%, var(--color-canvas)) 100%
+      );
       border-radius: var(--bubble-shape);
       content: "";
       inset: 0;
       position: absolute;
       transform: rotate(var(--bubble-rotate));
+      z-index: -1;
     }
 
     @media (any-hover: hover) {