Skip to main content

max / goingson

Adopt surface-well on the four list containers The list surfaces read as bands on a panel today. Each is now a well: the content surface cut into the raised one it sits in, so a list reads as content in a container. Uses the .well class makeover-webview already emits rather than writing the fill and the inset bevel out four times. That class arrived unused with phase A; this is its first consumer, and it is why fill and edge are named together in the description. Adds --surface-well to the intent layer at the resolved goingson value. makeover derives it and themes.js applies the whole intent set, so this default only covers first paint, but it is required: an undefined var() invalidates the whole declaration rather than degrading, so a rule reading an intent with no default here would drop its background entirely until the theme loads. The filed task said to adopt the intent; it did not say this, and the same omission was already corrected once for the bevel. Containers: task list, event list, email list, contacts grid. Bumps makeover to 2.3.0, which is what carries the derivation.
Author: Max Johnson <me@maxj.phd> · 2026-07-28 22:34 UTC
Signed with PGP, not checked
Commit: 4f28357ae8470a1fa78f8c05cc04ad3e378178de
Parent: 39cada4
4 files changed, +14 insertions, -7 deletions
M Cargo.lock +2 -2
@@ -3364,9 +3364,9 @@
3364 3364
3365 3365 [[package]]
3366 3366 name = "makeover"
3367 - version = "2.2.0"
3367 + version = "2.3.0"
3368 3368 source = "registry+https://github.com/rust-lang/crates.io-index"
3369 - checksum = "f3d7c2a566230afeed8b2b9d8decc2edfdc9b1f067e7791303df8301a73aeff1"
3369 + checksum = "e35cc903581eea6df09a3a102f101d85a6b941ea18431fcd0a70738762271fdf"
3370 3370 dependencies = [
3371 3371 "include_dir",
3372 3372 "serde",
M Cargo.toml +1 -1
@@ -82,7 +82,7 @@
82 82 # Filesystem watching (db change notifications)
83 83 notify = "8.2"
84 84 notify-debouncer-mini = "0.7"
85 - makeover = "2.2.0"
85 + makeover = "2.3.0"
86 86 alloy_tui = "2.0.0"
87 87 toml = "1.1"
88 88
@@ -156,7 +156,7 @@
156 156 <div class="task-cell" role="columnheader">Progress</div>
157 157 <div class="task-cell task-actions-header" role="columnheader"><span class="sr-only">Actions</span></div>
158 158 </div>
159 - <div class="task-list-container" id="task-list-container" aria-live="polite">
159 + <div class="task-list-container well" id="task-list-container" aria-live="polite">
160 160 <div class="skeleton-shimmer" aria-label="Loading tasks">
161 161 <div class="skeleton-row"><div class="skeleton-lines"><div class="skeleton-line long"></div><div class="skeleton-line short"></div></div></div>
162 162 <div class="skeleton-row"><div class="skeleton-lines"><div class="skeleton-line medium"></div><div class="skeleton-line long"></div></div></div>
@@ -433,7 +433,7 @@
433 433 <div class="event-cell" role="columnheader">Location</div>
434 434 <div class="event-cell" role="columnheader"></div>
435 435 </div>
436 - <div class="event-list-container" id="event-list-container" aria-live="polite">
436 + <div class="event-list-container well" id="event-list-container" aria-live="polite">
437 437 <div class="skeleton-shimmer" aria-label="Loading events">
438 438 <div class="skeleton-row"><div class="skeleton-lines"><div class="skeleton-line medium"></div><div class="skeleton-line short"></div></div></div>
439 439 <div class="skeleton-row"><div class="skeleton-lines"><div class="skeleton-line long"></div><div class="skeleton-line medium"></div></div></div>
@@ -496,7 +496,7 @@
496 496 <button class="btn btn-sm bulk-select-all" data-act="bulk.selectAllEmails">Select All</button>
497 497 </div>
498 498 <div class="card card--shell email-list" id="email-list-wrapper" role="list">
499 - <div class="email-list-container" id="email-list" aria-live="polite">
499 + <div class="email-list-container well" id="email-list" aria-live="polite">
500 500 <div class="skeleton-shimmer" aria-label="Loading emails">
501 501 <div class="skeleton-row"><div class="skeleton-avatar"></div><div class="skeleton-lines"><div class="skeleton-line long"></div><div class="skeleton-line medium"></div></div></div>
502 502 <div class="skeleton-row"><div class="skeleton-avatar"></div><div class="skeleton-lines"><div class="skeleton-line medium"></div><div class="skeleton-line short"></div></div></div>
@@ -532,7 +532,7 @@
532 532 <button class="btn btn-sm btn-danger" data-act="contacts.bulkDelete">Delete</button>
533 533 <button class="btn btn-sm" data-act="contacts.clearSelection">Cancel</button>
534 534 </div>
535 - <div class="cards-grid-scroll" id="contacts-grid">
535 + <div class="cards-grid-scroll well" id="contacts-grid">
536 536 <div class="skeleton-shimmer" aria-label="Loading contacts">
537 537 <div class="skeleton-row"><div class="skeleton-avatar"></div><div class="skeleton-lines"><div class="skeleton-line long"></div><div class="skeleton-line short"></div></div></div>
538 538 <div class="skeleton-row"><div class="skeleton-avatar"></div><div class="skeleton-lines"><div class="skeleton-line medium"></div><div class="skeleton-line long"></div></div></div>
@@ -244,6 +244,13 @@
244 244 --surface-raised: #D9DDF4;
245 245 --surface-sunken: #BAC2E6;
246 246 --surface-overlay: #CDD3F0;
247 + /* The content surface cut into a raised one, so a list reads as content in
248 + a container rather than as bands on a panel. Derived by makeover from
249 + surface-raised, away from resolved content, so it goes lighter on a light
250 + theme and darker on a dark one. This default is the resolved goingson
251 + value: an intent read by a rule needs one here too, or the whole
252 + declaration is invalid until themes.js runs rather than degrading. */
253 + --surface-well: #F0F4FF;
247 254 /* The two edges of a bevel. makeover derives both from the theme's raised
248 255 surface, so they arrive with the rest of the intent set. */
249 256 --bevel-light: #FAFEFF;