From 8d82a1557b6bb0fdc82883f2186a71845870ef8e Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Mon, 13 Oct 2025 16:55:51 -0500
Subject: [PATCH] Allow selecting default color

- Adjust swatch layout to be more resilliant and space efficient
- Select text on focus
- Update placeholder
---
 app/assets/stylesheets/color-picker.css       | 44 +++++--------------
 .../show/menu/_column_form.html.erb           | 12 ++---
 2 files changed, 16 insertions(+), 40 deletions(-)

diff --git a/app/assets/stylesheets/color-picker.css b/app/assets/stylesheets/color-picker.css
index 7519bfe50..af4601181 100644
--- a/app/assets/stylesheets/color-picker.css
+++ b/app/assets/stylesheets/color-picker.css
@@ -1,40 +1,16 @@
 @layer components {
-  .color-picker {
-    --color-picker-origin: calc(var(--btn-size) / 2 + var(--color-picker-spacer));
-    --color-picker-spacer: 0.5ch;
-
-    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;
-      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);
+    grid-template-columns: repeat(3, 1fr);
+    gap: var(--inline-space-half);
+
+    .btn {
+      --btn-border-radius: 0.1em;
+      --btn-size: 2em;
+      --icon-size: 1.3em;
+
+      inline-size: 100%;
+    }
   }
 }
 
diff --git a/app/views/collections/show/menu/_column_form.html.erb b/app/views/collections/show/menu/_column_form.html.erb
index 0b4cb854c..1382d4745 100644
--- a/app/views/collections/show/menu/_column_form.html.erb
+++ b/app/views/collections/show/menu/_column_form.html.erb
@@ -1,10 +1,10 @@
 <%= form_with model: [collection, column], data: { controller: "form", action: "turbo:submit-end->dialog#close turbo:submit-end->form#reset" } do |form| %>
-  <%= form.text_field :name, class: "input", placeholder: "Column name", value: column.name,
-        required: true, autocomplete: "off", pattern: ".*\\S.*", title: "Column name cannot be blank" %>
-  <div class="flex flex-wrap gap-half justify-space-between margin-block-half">
-    <% Card::COLORS.each do |color| %>
-      <label class="btn btn--circle txt-small borderless" style="--btn-background: <%= color %>" title="<%= color %>">
-        <%= form.radio_button :color, color, checked: (column.color == color) %>
+  <%= form.text_field :name, class: "input", placeholder: "Name this column", value: column.name,
+        required: true, autocomplete: "off", pattern: ".*\\S.*", title: "Column name cannot be blank", data: { action: "focus->form#select" } %>
+  <div class="color-picker__colors">
+    <% ([Card::DEFAULT_COLOR] + Card::COLORS).each do |color| %>
+      <label class="btn txt-small borderless" style="--btn-background: <%= color %>" title="<%= color %>">
+        <%= form.radio_button :color, color, checked: (column.color == color || (column.new_record? && color == Card::DEFAULT_COLOR)) %>
         <%= icon_tag "check", class: "checked" %>
         <span class="for-screen-reader"><%= color %></span>
       </label>