Merge pull request #1772 from basecamp/andy-dec-1-25

Andy dec 1 25

Author: andyra

app/assets/stylesheets/base.css

@@ -53,7 +53,7 @@
   }
 
   ::selection {
-    background-color: var(--color-selected);
+    background: var(--color-selected);
 
     @media (prefers-color-scheme: dark) {
       background-color: var(--color-selected-dark);

app/assets/stylesheets/card-columns.css

@@ -486,7 +486,6 @@
     }
 
     .card__title {
-      line-height: 1.2;
       pointer-events: none;
     }
 
@@ -728,8 +727,10 @@
     text-transform: uppercase;
 
     @media (hover: hover) {
-      &:hover {
-        --btn-background: color(from var(--card-color) srgb r g b / 0.15);
+      &:not(.card__column-name--current):hover {
+        --btn-background: color(from var(--column-color) srgb r g b / 0.15);
+
+        color: var(--column-color);
       }
     }
   }

app/assets/stylesheets/cards.css

@@ -150,18 +150,29 @@
     color: var(--card-content-color);
     font-size: var(--text-xx-large);
     font-weight: 900;
-    line-height: 1.3;
-    /* We need a minimum line-height of 1.3 to avoid scrolling
-      in the card title input and cut-off descenders on Windows */
+    line-height: 1.15;
+    margin-block-end: 1ch;
     text-wrap: balance;
 
-    @supports not (field-sizing: content) {
-      &:has(textarea) {
+    /* With tight line spacing, Windows will cover over adjacent lines of text
+     * when input text is selected. Here, we're setting the selection color to a
+     * transparent value so the overlapping text lines are at least visible. */
+    ::selection {
+      background: oklch(var(--lch-blue-light) / 0.5);
+    }
+
+    &:has(textarea) {
+      margin-block-end: 0;
+
+      @supports not (field-sizing: content) {
         text-wrap: unset; /* Safari is annoying if you have text-wrap: balance in textareas */
       }
     }
 
     .card-field__title {
+      overflow: hidden; /* prevent scrolling on windows */
+      padding-block-end: 1ch;
+
       &:is(textarea)::placeholder {
         color: inherit;
         opacity: 0.66;
@@ -366,7 +377,6 @@
     color: var(--stamp-color);
     font-size: 1.3em;
     font-weight: 900;
-    line-height: 1.2;
     position: relative;
     text-align: center;
     text-transform: uppercase;

app/assets/stylesheets/trays.css

@@ -405,6 +405,10 @@
           opacity: 1;
         }
       }
+
+      [aria-busy] & {
+        position: absolute !important;
+      }
     }
 
     .avatar,

app/helpers/columns_helper.rb

@@ -5,6 +5,7 @@ def button_to_set_column(card, column)
       card_triage_path(card, column_id: column),
       method: :post,
       class: [ "card__column-name btn", { "card__column-name--current": column == card.column && card.open? } ],
+      style: "--column-color: #{column.color}",
       form_class: "flex align-center gap-half",
       data: { turbo_frame: "_top" }
   end

app/views/cards/columns/edit.html.erb

@@ -4,12 +4,14 @@
 
     <%= button_to "Not now", card_not_now_path(@card),
         class: [ "card__column-name btn", { "card__column-name--current": @card.postponed? } ],
+        style: "--column-color: var(--color-card-complete)",
         role: "radio",
         aria: { checked: @card.postponed? },
         form_class: "flex align-center gap-half" %>
 
     <%= button_to "Maybe?", card_triage_path(@card), method: :delete,
         class: [ "card__column-name card__column-name--stream btn", { "card__column-name--current": @card.awaiting_triage? } ],
+          style: "--column-color: var(--color-card-default)",
         role: "radio",
         aria: { checked: @card.awaiting_triage? },
         form_class: "flex align-center gap-half" %>
@@ -20,6 +22,7 @@
 
     <%= button_to "Done", card_closure_path(@card),
         class: [ "card__column-name btn", { "card__column-name--current": @card.closed? } ],
+        style: "--column-color: var(--color-card-complete)",
         role: "radio",
         aria: { checked: @card.closed? },
         form_class: "flex align-center gap-half" %>