Drafts should always use the dashed outline wherever they're displayed

app/assets/stylesheets/bubbles.css

@@ -439,6 +439,10 @@
   flex-grow: 1;
   white-space: nowrap;
 
+  .drafted & {
+    color: color(from var(--color-ink) srgb r g b / 0.5);
+  }
+
   &::after {
     border-block-end: 1px dotted var(--color-subtle-dark);
     content: "";
@@ -448,9 +452,12 @@
 }
 
 .bubble__shape {
-  background-color: var(--bubble-color);
+  background-color: var(--bubble-background-color, var(--bubble-color));
   block-size: var(--bubble-size, 1.2em);
+  border-color: var(--bubble-border-color, var(--bubble-color));
   border-radius: var(--bubble-shape);
+  border-style: var(--bubble-border-style, solid);
+  border-width: var(--bubble-border-width, 0);
   inline-size: var(--bubble-size, 1.2em);
   pointer-events: none;
   position: relative;
@@ -460,13 +467,17 @@
 
   .bubble & {
     --bubble-size: 100%;
-
-    background-color: color(from var(--bubble-color) srgb r g b / 0.15);
-    border: var(--bubble-border-width) solid var(--bubble-color);
+    --bubble-background-color: color(from var(--bubble-color) srgb r g b / 0.15);
   }
 
-  .bubble.drafted & {
-    border-style: dashed;
+  .drafted & {
+    --bubble-border-style: dashed;
+
+    .bubbles-list & {
+      --bubble-background-color: color(from var(--bubble-color) srgb r g b / 0.15);
+      --bubble-border-color: var(--bubble-color);
+      --bubble-border-width: 0.15rem;
+    }
   }
 
   .bubble:has(.bubble__link) & {

app/views/bubbles/list/_bubble.html.erb

@@ -1,4 +1,4 @@
-<li class="flex align-center gap-half margin-none" style="--bubble-color: <%= bubble.color %>; <%= bubble_rotation(bubble) %>"
+<li class="<%= class_names("flex align-center gap-half margin-none", drafted: bubble.drafted?) %>" style="--bubble-color: <%= bubble.color %>; <%= bubble_rotation(bubble) %>"
     data-controller="animation" data-animation-play-class="bubble--wobble" data-animation-play-on-load-value="true" data-action="mouseover->animation#play">
   <div class="bubble__shape flex-item-no-shrink"></div>
 

app/views/buckets/_bucket.html.erb

@@ -3,7 +3,7 @@
     <%= link_to bubbles_path(bucket_ids: [ bucket ]), class: "border border-radius margin-block-end-half windshield__container flex justify-center align-center position-relative" do %>
       <div class="windshield bucket__windshield flex flex-wrap gap justify-center align-end" style="view-transition-name: windshield_<%= bucket.id %>">
         <% bucket.bubbles.ordered_by_activity.limit(10).each do |bubble| %>
-          <div class="bubble" style="--bubble-color: <%= bubble.color %>; <%= bubble_rotation(bubble) %> <%= bubble_size(bubble) %>">
+          <div class="<%= class_names("bubble", drafted: bubble.drafted?) %>" style="--bubble-color: <%= bubble.color %>; <%= bubble_rotation(bubble) %> <%= bubble_size(bubble) %>">
             <span class="bubble__shape"></span>
           </div>
         <% end %>