From e3ed381621f59d15f2eed06fbd166ecbf79f7854 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Thu, 1 May 2025 11:35:50 +0200
Subject: [PATCH] Variable bubble shapes

---
 app/assets/stylesheets/cards.css | 32 +++++++++++++++++++++++---------
 1 file changed, 23 insertions(+), 9 deletions(-)

diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index e492a017b..b74e76fba 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -174,7 +174,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;
-    
+
   }
 
   .card__move-button {
@@ -269,19 +269,30 @@
   }
 
   .card__bubble {
+    --bubble-shape: 42% 72% 68% 43% / 53% 73% 45% 67%;
     --size: 5cqi;
 
     background:
-      /* Iridescent color swirl */
-      radial-gradient(circle at 60% 40%, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.0) 40%),
-      radial-gradient(circle at 70% 70%, rgba(255,182,193,0.5) 0%, rgba(173,216,230,0.5) 40%, rgba(144,238,144,0.2) 60%, rgba(255,255,224,0.2) 80%, rgba(255,255,255,0.0) 100%),
-      radial-gradient(circle at 30% 70%, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.0) 50%),
-      radial-gradient(circle at 50% 50%, rgba(176,224,230,0.4) 0%, rgba(255,182,193,0.2) 60%, rgba(255,255,255,0.0) 100%);
-    box-shadow: 0 0 4px 2px rgba(100,150,255,0.1) inset;
+      radial-gradient(circle at 60% 40%,
+        oklch(var(--lch-ink-inverted)/80%) 0%,
+        oklch(var(--lch-ink-inverted)/0%) 40%),
+      radial-gradient(circle at 70% 70%,
+        oklch(var(--lch-red-medium)/40%) 0%,
+        oklch(var(--lch-purple-medium)/30%) 40%,
+        oklch(var(--lch-green-medium)/10%) 60%,
+        oklch(var(--lch-yellow-medium)/10%) 80%,
+        oklch(var(--lch-ink-inverted)/0%) 100%),
+      radial-gradient(circle at 30% 70%,
+        oklch(var(--lch-ink-inverted)/30%) 0%,
+        oklch(var(--lch-ink-inverted)/0%) 50%),
+      radial-gradient(circle at 50% 50%,
+        oklch(var(--lch-blue-medium)/50%) 0%,
+        oklch(var(--lch-pink-medium)/10%) 60%,
+        oklch(var(--lch-ink-inverted)/0%) 100%);
+    box-shadow: 0 0 4px 2px oklch(var(--lch-blue-medium)/0.2) inset;
     block-size: var(--size);
-    border-radius: 42% 72% 68% 43% / 53% 73% 45% 67%;
+    border-radius: var(--bubble-shape);
     padding: 0.5cqi;
-    /* color: var(--color-negative); */
     container-type: inline-size;
     font-size: 1.75rem;
     font-weight: bold;
@@ -305,6 +316,9 @@
       letter-spacing: 0.125ch;
       text-transform: uppercase;
     }
+
+    .card:nth-child(2n+1) & { --bubble-shape: 70% 72% 39% 80% / 74% 73% 64% 51%; }
+    .card:nth-child(3n+1) & { --bubble-shape: 45% 72% 65% 50% / 41% 73% 44% 72%; }
   }
 
   .card__bubble--today {