Address PR feedback

app/assets/stylesheets/cards.css

@@ -4,6 +4,7 @@
 
   .card {
     --avatar-size: 2.75em;
+    --card-bg-color: color-mix(in srgb, var(--card-color) 4%, var(--color-canvas));
     --card-padding-inline: var(--inline-space-double);
     --card-padding-block: var(--block-space);
     --border-color: transparent;
@@ -11,7 +12,7 @@
     --border-size: 0;
 
     aspect-ratio: var(--card-aspect-ratio, auto);
-    background-color: color-mix(in srgb, var(--card-color) 4%, var(--color-canvas));
+    background-color: var(--card-bg-color);
     border-radius: var(--border-radius);
     box-shadow: var(--shadow);
     color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));

app/assets/stylesheets/inputs.css

@@ -24,6 +24,10 @@
     &:where(:focus) {
       --focus-ring-offset: -1px;
     }
+
+    &[readonly] {
+      --focus-ring-size: 0;
+    }
   }
 
   .input--file {
@@ -124,6 +128,9 @@
 
   /* Switches */
   .switch {
+    --switch-color: var(--color-ink-medium);
+    --switch-hover-brightness: 0.9;
+
     block-size: 1.75em;
     border-radius: 2em;
     display: inline-flex;
@@ -144,7 +151,7 @@
   }
 
   .switch__btn {
-    background-color: var(--color-ink-medium);
+    background-color: var(--switch-color);
     border-radius: 2em;
     cursor: pointer;
     inset: 0;
@@ -164,13 +171,20 @@
       transition: 150ms ease;
     }
 
+    @media (any-hover: hover) {
+      &:hover {
+        background-color: color-mix(in srgb, var(--switch-color) 80%, var(--color-ink));
+      }
+    }
+
     .switch__input:disabled + & {
-      background-color: var(--color-ink-medium) !important;
+      --switch-color: var(--color-ink-medium) !important;
+
       cursor: not-allowed;
     }
 
     .switch__input:checked + & {
-      background-color: var(--color-link);
+      --switch-color: var(--color-link);
 
       &::before {
         transform: translateX(1.2em);

app/views/cards/display/common/_assignees.html.erb

@@ -4,7 +4,7 @@
   <% end %>
 
   <div class="position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside" <%= "hidden" if card.closed? %>>
-    <button class="btn card__hide-on-index fill-transparent" data-action="click->dialog#open:stop">
+    <button class="btn card__hide-on-index" data-action="click->dialog#open:stop" style="--btn-background: var(--card-bg-color);">
       <%= icon_tag "person-add" %>
       <span class="for-screen-reader">Assign</span>
     </button>

app/views/cards/display/perma/_tags.html.erb

@@ -12,7 +12,7 @@
   </div>
 
   <div class="position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside" <%= "hidden" if card.closed? %>>
-    <button class="tag-picker__button btn card__hide-on-index fill-transparent" data-action="click->dialog#open:stop">
+    <button class="tag-picker__button btn card__hide-on-index" data-action="click->dialog#open:stop" style="--btn-background: var(--card-bg-color);">
       <%= icon_tag "tag" %>
       <span class="for-screen-reader">Add a tag</span>
     </button>

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

@@ -28,7 +28,7 @@
       <% end %>
 
       <div class="position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside" <%= "hidden" if card.closed? %>>
-        <button class="btn card__hide-on-index fill-transparent" data-action="click->dialog#open:stop">
+        <button class="btn card__hide-on-index" data-action="click->dialog#open:stop" style="--btn-background: var(--card-bg-color);">
           <%= icon_tag "person-add" %>
           <span class="for-screen-reader">Assign</span>
         </button>

app/views/cards/show.html.erb

@@ -27,8 +27,11 @@
 <% end %>
 
 <header class="card-perma__collection-header">
-  <%= link_to cards_path(collection_ids: [ @card.collection ]), class: "txt-large overflow-ellipsis margin-none txt-ink", style: "view-transistion-name: card-collection-title", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
-    &larr; <strong class="font-black"><%= @card.collection.name %></strong>
+  <%= link_to cards_path(collection_ids: [ @card.collection ]), class: "btn borderless txt-large", style: "--btn-padding: 0.25ch 1ch 0.25ch 0.75ch; view-transistion-name: card-collection-title;", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
+    <span>
+      &larr;
+      <strong class="font-black"><%= @card.collection.name %></strong>
+    </span>
   <% end %>
 </header>
 

app/views/collections/edit/_publication.html.erb

@@ -11,13 +11,13 @@
             <%= form.check_box :published, class: "switch__input", checked: true, data: { action: "change->form#submit" } %>
             <span class="switch__btn round"></span>
             <span class="for-screen-reader">Turn off the public link</span>
-          <% end %> 
+          <% end %>
         </label>
         <span class="txt-large"><%= icon_tag "world" %></span>
       </div>
 
       <div class="flex align-center gap-half margin-block">
-        <%= text_field_tag :publication_url, published_collection_url(collection), disabled: true, class: "full-width input fill-white" %>
+        <%= text_field_tag :publication_url, published_collection_url(collection), readonly: true, class: "full-width input fill-white" %>
         <div class="flex align-center justify-center gap-half">
           <%= button_to_copy_to_clipboard(published_collection_url(collection)) do %>
             <%= icon_tag "copy-paste" %>
@@ -44,7 +44,7 @@
             <%= form.check_box :published, class: "switch__input", checked: false, data: { action: "change->form#submit" } %>
             <span class="switch__btn round"></span>
             <span class="for-screen-reader">Turn on the public link</span>
-          <% end %> 
+          <% end %>
         </label>
         <span class="txt-large"><%= icon_tag "world" %></span>
       </div>