Merge pull request #1683 from basecamp/andy-nov-20

Andy nov 20

app/assets/stylesheets/base.css

@@ -54,6 +54,10 @@
 
   ::selection {
     background-color: var(--color-selected);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-selected-dark);
+    }
   }
 
   :where(ul, ol):where([role="list"]) {

app/assets/stylesheets/buttons.css

@@ -109,9 +109,11 @@
       aspect-ratio: 1;
       padding: 0.5em;
 
+      kbd,
       span:last-of-type {
         display: none;
       }
+
     }
   }
 

app/assets/stylesheets/filters.css

@@ -1,4 +1,8 @@
 @layer components {
+  #header:has(.filters) {
+    position: relative;
+  }
+
   .filters {
     align-items: center;
     display: flex;
@@ -13,10 +17,10 @@
       --btn-border-color: var(--color-ink-medium);
       --input-background: var(--color-canvas);
     }
-  }
 
-  #header:has(.filters) {
-    position: relative;
+    &:has(.filter-toggle:hover) {
+      z-index: calc(var(--z-nav) + 1);
+    }
   }
 
   .filter {
@@ -170,5 +174,17 @@
   .filters--has-filters-set .filters__manage {
     display: flex;
   }
+
+  .filters__show-when-expanded {
+    .filters:not(.filters--expanded) & {
+      display: none;
+    }
+  }
+
+  .filters__show-when-collapsed {
+    .filters--expanded & {
+      display: none;
+    }
+  }
 }
 

app/views/events/index/_add_board_button.html.erb

@@ -1,7 +1,7 @@
 <div class="header__actions header__actions--end">
   <div>
     <%= link_to new_board_path, class: "btn btn--link btn--circle-mobile", data: { controller: "hotkey", action: "keydown.b@document->hotkey#click" } do %>
-      <%= icon_tag "board", class: "show-on-touch" %>
+      <%= icon_tag "board" %>
       <span class="overflow-ellipsis">Add a board</span>
       <kbd class="hide-on-touch">B</kbd>
     <% end %>

app/views/events/index/_add_card_button.html.erb

@@ -1,7 +1,7 @@
 <div class="header__actions header__actions--start">
   <% if board = user_filtering.single_board_or_first %>
     <%= button_to board_cards_path(board), method: :post, class: "btn btn--link btn--circle-mobile", data: { controller: "hotkey", action: "keydown.c@document->hotkey#click" } do %>
-      <%= icon_tag "add", class: "show-on-touch" %>
+      <%= icon_tag "add" %>
       <span class="overflow-ellipsis">Add a card</span>
       <kbd class="hide-on-touch">C</kbd>
     <% end %>

app/views/filters/settings/_toggle.html.erb

@@ -8,6 +8,7 @@
 <% else %>
   <button type="button" class="btn txt-x-small filter-toggle" data-action="toggle-class#toggle toggle-enable#toggle" data-controller="tooltip">
     <%= icon_tag "filter" %>
-    <span class="for-screen-reader">Expand filter options</span>
+    <span class="filters__show-when-expanded for-screen-reader">Collapse filter options</span>
+    <span class="filters__show-when-collapsed for-screen-reader">Expand filter options</span>
   </button>
 <% end %>