Inject a span with a class with the value so that we can style it

https://37s.fizzy.37signals.com/buckets/693169850/bubbles/999008854

app/assets/stylesheets/cards.css

@@ -86,6 +86,10 @@
     inline-size: calc(100dvw - var(--actions-inline-inset) * 2 - var(--btn-size) * 2);
   }
 
+  .local-time-value {
+    font-weight: bold;
+  }
+
   @media (prefers-color-scheme: dark) {
     --border-color: var(--color-subtle-dark);
     --border-size: 1px;

app/javascript/controllers/local_time_controller.js

@@ -1,5 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
-import { differenceInDays } from "helpers/date_helpers";
+import { differenceInDays } from "helpers/date_helpers"
 
 export default class extends Controller {
   static targets = [ "time", "date", "datetime", "shortdate", "ago", "indays", "daysago" ]
@@ -12,8 +12,8 @@ export default class extends Controller {
     this.shortDateFormatter = new Intl.DateTimeFormat(undefined, { month: "short", day: "numeric" })
     this.dateTimeFormatter = new Intl.DateTimeFormat(undefined, { timeStyle: "short", dateStyle: "short" })
     this.agoFormatter = new AgoFormatter()
-    this.indaysFormatter = new InDaysFormatter()
     this.daysagoFormatter = new DaysAgoFormatter()
+    this.indaysFormatter = new InDaysFormatter()
   }
 
   connect() {
@@ -60,7 +60,7 @@ export default class extends Controller {
 
   #formatTime(formatter, target) {
     const dt = new Date(target.getAttribute("datetime"))
-    target.textContent = formatter.format(dt)
+    target.innerHTML = formatter.format(dt)
     target.title = this.dateTimeFormatter.format(dt)
   }
 }
@@ -93,32 +93,26 @@ class AgoFormatter {
   }
 }
 
-class InDaysFormatter {
-  format(date) {
-    const days = differenceInDays(new Date(), date)
-
-    if (days <= 0) {
-      return "today"
-    }
-    if (days === 1) {
-      return "tomorrow"
-    }
-
-    return `in ${Math.round(days)} days`
-  }
-}
-
 class DaysAgoFormatter {
   format(date) {
     const days = differenceInDays(date, new Date())
 
-    if (days <= 0) {
-      return "today"
-    }
-    if (days === 1) {
-      return "yesterday"
-    }
-
-    return `${Math.round(days)} days ago`
+    if (days <= 0) return styleableValue("today")
+    if (days === 1) return styleableValue("yesterday")
+    return `${styleableValue(days)} days ago`
   }
 }
+
+class InDaysFormatter {
+  format(date) {
+    const days = differenceInDays(new Date(), date)
+
+    if (days <= 0) return styleableValue("today")
+    if (days === 1) return styleableValue("tomorrow")
+    return `in ${styleableValue(days)} days`
+  }
+}
+
+function styleableValue(value) {
+  return `<span class="local-time-value">${value}</span>`
+}

app/views/bubbles/cards/common/_meta.html.erb

@@ -8,7 +8,7 @@
 
     <% if bubble.creating? %>
       <span class="pad-inline overflow-ellipsis">Expires
-        <%= local_datetime_tag(bubble.auto_pop_at, style: :daysago) %>
+        <%= local_datetime_tag(bubble.auto_pop_at, style: :indays) %>
       </span>
     <% else %>
       <span class="pad-inline overflow-ellipsis">Added