Same sizes for swatches

app/assets/stylesheets/color-picker.css

@@ -2,11 +2,11 @@
   --panel-border-color: var(--card-color);
   --panel-border-radius: 2em;
   --panel-border-size: 2px;
-  --panel-padding: 0.5em 0.7em;
+  --panel-padding: 0.5em;
   --panel-size: auto;
 
   inline-size: auto !important;
-  inset: 50% auto auto calc(-1 * var(--block-space));
+  inset: 50% auto auto calc(-1 * var(--panel-padding));
   max-inline-size: var(--panel-size) !important;
   position: absolute;
   translate: 0 -50%;
@@ -15,22 +15,4 @@
   &[open] {
     display: flex;
   }
-
-  .color-picker__color {
-    --btn-size: 2em;
-  }
-}
-
-.color-picker__button {
-  font-size: 0.75em;
-
-  .cards & {
-    display: none;
-  }
-
-  + .panel {
-    --panel-size: auto;
-
-    inset: 0 0 auto auto;
-  }
 }

app/views/workflows/_workflow.html.erb

@@ -10,7 +10,7 @@
 
     <hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-ink-medium);" aria-hidden="true">
 
-    <div class="flex flex-column gap margin-block-start">
+    <div class="flex flex-column gap-half margin-block-start">
       <%= turbo_frame_tag dom_id(workflow, :stages) do %>
         <%= render partial: "workflows/stages/stage", collection: workflow.stages %>
 

app/views/workflows/stages/_color.html.erb

@@ -1,5 +1,5 @@
 <div class="position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close">
-  <button class="btn btn--reversed txt-x-small" data-action="dialog#open:stop" style="--btn-background: <%= stage_color(stage) %>">
+  <button class="btn btn--reversed txt-small borderless" data-action="dialog#open:stop" style="--btn-background: <%= stage_color(stage) %>">
     <%= icon_tag "art" %>
     <span class="for-screen-reader">Change color</span>
   </button>
@@ -15,7 +15,7 @@
     <%= form_with model: stage, url: workflow_stage_path(stage.workflow, stage), class: "flex gap-half", data: { controller: "form", action: "change->form#submit" } do |form| %>
       <% Colorable::COLORS.each do |color| %>
         <span class="color-picker__color">
-          <label class="btn btn--circle" style="--btn-background: <%= color %>" title="<%= 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>