Add wavy BG to Stream workflow stage

app/assets/stylesheets/_global.css

@@ -43,6 +43,10 @@
             0 0.4em 0.4em oklch(var(--lch-black) / 5%),
             0 0.8em 0.8em oklch(var(--lch-black) / 5%);
 
+  /* Patterns */
+  --wavy-background-mask: radial-gradient(6px at 50% calc(100% + 3px), transparent calc(99% - 2px), black calc(101% - 2px) 99%, transparent 101%) calc(50% - 8px) calc(50% - 3px + .5px)/16px 6px,
+ radial-gradient(6px at 50% -3px, transparent calc(99% - 2px), black calc(101% - 2px) 99%, transparent 101%) 50% calc(50% + 3px)/16px 6px;
+
   /* Components */
   --btn-size: 2.65em;
   --footer-height: 3.5rem;

app/assets/stylesheets/card-columns.css

@@ -310,8 +310,7 @@
           color-mix(in oklch, var(--color-considering) 0%, transparent) 100%);
         content: "";
         inset: 0;
-        mask: radial-gradient(6px at 50% calc(100% + 3px), transparent calc(99% - 2px), black calc(101% - 2px) 99%, transparent 101%) calc(50% - 8px) calc(50% - 3px + .5px)/16px 6px,
-              radial-gradient(6px at 50% -3px, transparent calc(99% - 2px), black calc(101% - 2px) 99%, transparent 101%) 50% calc(50% + 3px)/16px 6px;
+        mask: var(--wavy-background-mask);
         position: absolute;
         z-index: 0;
       }

app/assets/stylesheets/cards.css

@@ -193,6 +193,7 @@
     display: flex;
     flex: 0 1 auto;
     flex-direction: column;
+    gap: 2px;
     justify-self: end;
     max-inline-size: 20ch;
     padding-block: var(--block-space-half);

app/assets/stylesheets/workflows.css

@@ -7,6 +7,8 @@
 
     color: inherit;
     inline-size: 100%;
+    justify-content: flex-start;
+    text-transform: uppercase;
 
     @media (hover: hover) {
       &:hover {
@@ -27,6 +29,18 @@
     }
   }
 
+  @supports(mask: radial-gradient(black)) {
+    .workflow-stage--stream:before {
+      background: white;
+      content: "";
+      inset: 0;
+      mask: var(--wavy-background-mask);
+      position: absolute;
+      z-index: 0;
+      opacity: 0.25;
+    }
+  }
+
   /* Workflow settings
   /* ------------------------------------------------------------------------ */
 

app/helpers/workflows_helper.rb

@@ -4,7 +4,7 @@ module WorkflowsHelper
       tag.span(stage.name, class: "overflow-ellipsis"),
       card_staging_path(card, stage_id: stage),
       method: :put,
-      class: [ "btn justify-start workflow-stage txt-uppercase", { "workflow-stage--current": stage == card.stage } ],
+      class: [ "workflow-stage btn", { "workflow-stage--current": stage == card.stage } ],
       form_class: "flex align-center gap-half",
       data: { turbo_frame: "_top" }
   end

app/views/cards/display/preview/_stages.html.erb

@@ -1,7 +1,7 @@
 <% if workflow = card.workflow %>
   <div class="card__stages">
     <% workflow.stages.each do |stage| %>
-      <%= tag.span stage.name, class: ["overflow-ellipsis btn justify-start workflow-stage txt-uppercase", { "workflow-stage--current": stage == card.stage }] %>
+      <%= tag.span stage.name, class: ["workflow-stage btn overflow-ellipsis", { "workflow-stage--current": stage == card.stage }] %>
     <% end %>
   </div>
 <% end %>

app/views/cards/display/public_preview/_stages.html.erb

@@ -2,7 +2,7 @@
   <div id="<%= dom_id(card, :stages) %>" class="card__stages">
     <% workflow.stages.each do |stage| %>
       <%= tag.div stage.name,
-                class: ["overflow-ellipsis flex align-center gap-half btn non-clickable justify-start workflow-stage txt-uppercase no-hover", { "workflow-stage--current": stage == card.stage }] %>
+                class: ["workflow-stage overflow-ellipsis flex align-center gap-half btn non-clickable no-hover", { "workflow-stage--current": stage == card.stage }] %>
     <% end %>
   </div>
 <% end %>

app/views/cards/stagings/_stages.html.erb

@@ -1,16 +1,16 @@
 <% if workflow = card.collection.workflow %>
   <div id="<%= dom_id(card, :stages) %>" class="card__stages">
     <%= button_to "Not now", card_closure_path(card, reason: "Not now"),
-        class: [ "btn justify-start workflow-stage txt-uppercase", { "workflow-stage--current": card.closed? } ],
+        class: [ "workflow-stage btn", { "workflow-stage--current": card.closed? } ],
         form_class: "flex align-center gap-half" %>
     <%= button_to "The Stream", card_engagement_path(card), method: :delete,
-        class: [ "btn justify-start workflow-stage txt-uppercase", { "workflow-stage--current": card.considering? } ],
+        class: [ "workflow-stage workflow-stage--stream btn", { "workflow-stage--current": card.considering? } ],
         form_class: "flex align-center gap-half" %>
     <% workflow.stages.each do |stage| %>
       <%= button_to_set_stage card, stage %>
     <% end %>
     <%= button_to "Closed", card_closure_path(card, reason: "Completed"),
-        class: [ "btn justify-start workflow-stage txt-uppercase", { "workflow-stage--current": card.closed? } ],
+        class: [ "workflow-stage btn", { "workflow-stage--current": card.closed? } ],
         form_class: "flex align-center gap-half" %>
   </div>
 <% end %>