From 1f54e5d6bf2898fcaf3580393829dc51a85328db Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Mon, 18 Aug 2025 14:56:08 -0500
Subject: [PATCH] Animate color piacker and split onto two rows for mobile

---
 app/assets/stylesheets/color-picker.css    | 50 ++++++++++++++++------
 app/views/workflows/stages/_color.html.erb | 16 +++----
 2 files changed, 43 insertions(+), 23 deletions(-)

diff --git a/app/assets/stylesheets/color-picker.css b/app/assets/stylesheets/color-picker.css
index 69bcbe86d..7519bfe50 100644
--- a/app/assets/stylesheets/color-picker.css
+++ b/app/assets/stylesheets/color-picker.css
@@ -1,18 +1,40 @@
-.color-picker {
-  --panel-border-color: var(--card-color);
-  --panel-border-radius: 2em;
-  --panel-border-size: 2px;
-  --panel-padding: 0.5em;
-  --panel-size: auto;
+@layer components {
+  .color-picker {
+    --color-picker-origin: calc(var(--btn-size) / 2 + var(--color-picker-spacer));
+    --color-picker-spacer: 0.5ch;
 
-  inline-size: auto !important;
-  inset: 50% auto auto calc(-1 * var(--panel-padding));
-  max-inline-size: var(--panel-size) !important;
-  position: absolute;
-  translate: 0 -50%;
-  z-index: var(--z-popup);
+    background-color: var(--color-canvas);
+    border-radius: calc(var(--btn-size) / 2 + var(--color-picker-spacer));
+    gap: var(--color-picker-spacer);
+    inline-size: auto !important;
+    inset: calc(-1 * var(--color-picker-spacer)) auto auto calc(-1 * var(--color-picker-spacer));
+    max-inline-size: var(--panel-size) !important;
+    padding: var(--color-picker-spacer);
+    position: absolute;
+    transform: scale(0.5);
+    transform-origin: var(--color-picker-origin) var(--color-picker-origin);
+    transition: 150ms allow-discrete;
+    transition-property: display, opacity, overlay, transform;
+    z-index: var(--z-popup);opacity: 0;
 
-  &[open] {
-    display: flex;
+    &[open] {
+      display: flex;
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    @starting-style {
+      &[open] {
+        opacity: 0;
+        transform: scale(0.5);
+      }
+    }
+  }
+
+  .color-picker__colors {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: var(--color-picker-spacer);
   }
 }
+
diff --git a/app/views/workflows/stages/_color.html.erb b/app/views/workflows/stages/_color.html.erb
index ab065e34e..14c789e22 100644
--- a/app/views/workflows/stages/_color.html.erb
+++ b/app/views/workflows/stages/_color.html.erb
@@ -4,7 +4,7 @@
     <span class="for-screen-reader">Change color</span>
   </button>
 
-  <dialog class="color-picker panel fill-white shadow gap-half" data-dialog-target="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
+  <dialog class="color-picker shadow" data-dialog-target="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
     <form method="dialog">
       <button class="btn txt-small tooltip">
         <%= icon_tag "remove" %>
@@ -12,15 +12,13 @@
       </button>
     </form>
 
-    <%= form_with model: stage, url: workflow_stage_path(stage.workflow, stage), class: "flex gap-half", data: { controller: "form", action: "change->form#submit" } do |form| %>
+    <%= form_with model: stage, url: workflow_stage_path(stage.workflow, stage), class: "color-picker__colors", data: { controller: "form", action: "change->form#submit" } do |form| %>
       <% Card::COLORS.each do |color| %>
-        <span class="color-picker__color">
-          <label class="btn btn--circle txt-small borderless" style="--btn-background: <%= color %>" title="<%= color %>">
-            <%= form.radio_button :color, color %>
-            <%= icon_tag "check", class: "checked" %>
-            <span class="for-screen-reader"><%= color %></span>
-          </label>
-        </span>
+        <label class="btn btn--circle txt-small borderless" style="--btn-background: <%= color %>" title="<%= color %>">
+          <%= form.radio_button :color, color %>
+          <%= icon_tag "check", class: "checked" %>
+          <span class="for-screen-reader"><%= color %></span>
+        </label>
       <% end %>
     <% end %>
   </dialog>