Skip to main content

max / makenotwork

Point wizard.css and media-player.css at intents that exist 770f38c0 took style.css off the brand aliases and converted that file's own rules. It did not convert the two per-page sheets, and it deleted the alias block they were reading, so every colour declaration in wizard.css and media-player.css has referenced an undefined custom property since. An undefined var() is invalid at computed-value time, which drops the whole declaration: the wizard's dropdowns and dropzones have been rendering transparent rather than on a surface, and both sheets' muted text has been inheriting instead. Found while retargeting the shadow scale for wave 2 tier B5, by diffing every var() used in static/*.css against the properties actually defined. The mappings are not guesses; they are the alias values 770f38c0 removed: --background -> --surface-page --detail -> --content --text-muted -> --content-muted --light-background -> --surface-overlay --surface-muted -> --surface-sunken --highlight -> --action --surface-alt was a literal (#ebe7db) rather than an alias and takes --surface-raised, the nearest intent and the same move .card made. Two sites want a finer answer than a restored alias: .suggestion-item:hover is a hover step and wants --hover-surface, and .wizard-step is a panel that probably wants .raised. Both are tier B3 adoption calls, not this fix.
Author: Max Johnson <me@maxj.phd> · 2026-08-10 15:37 UTC
Signed with PGP, not checked
Commit: 2eb085164f392ae42d6c96f591110acffd73c3c5
Parent: 2135cc9
2 files changed, +60 insertions, -60 deletions
M server/static/media-player.css +32 -32
@@ -18,14 +18,14 @@
18 18 .author-avatar {
19 19 width: 48px;
20 20 height: 48px;
21 - background: var(--surface-muted);
21 + background: var(--surface-sunken);
22 22 border-radius: var(--radius-round);
23 23 display: flex;
24 24 align-items: center;
25 25 justify-content: center;
26 26 font-family: var(--font-heading);
27 27 font-size: var(--text-subhead);
28 - color: var(--detail);
28 + color: var(--content);
29 29 }
30 30
31 31 .author-info {
@@ -35,7 +35,7 @@
35 35 .author-name {
36 36 font-family: var(--font-mono);
37 37 font-size: var(--text-body);
38 - color: var(--detail);
38 + color: var(--content);
39 39 }
40 40
41 41 .author-name a {
@@ -50,7 +50,7 @@
50 50 .media-meta {
51 51 font-family: var(--font-mono);
52 52 font-size: var(--text-note);
53 - color: var(--text-muted);
53 + color: var(--content-muted);
54 54 }
55 55
56 56 /* Title */
@@ -60,7 +60,7 @@
60 60 font-weight: normal;
61 61 line-height: 1.2;
62 62 margin-bottom: var(--gap-section);
63 - color: var(--detail);
63 + color: var(--content);
64 64 text-align: left;
65 65 }
66 66
@@ -68,12 +68,12 @@
68 68 .media-series {
69 69 font-family: var(--font-mono);
70 70 font-size: var(--text-note);
71 - color: var(--text-muted);
71 + color: var(--content-muted);
72 72 margin-bottom: var(--gap-page);
73 73 }
74 74
75 75 .media-series a {
76 - color: var(--highlight);
76 + color: var(--action);
77 77 text-decoration: none;
78 78 }
79 79
@@ -83,14 +83,14 @@
83 83
84 84 /* Cover art (audio) */
85 85 .cover-art {
86 - background: var(--surface-muted);
86 + background: var(--surface-sunken);
87 87 aspect-ratio: 1;
88 88 max-width: 400px;
89 89 margin: 0 auto var(--gap-page);
90 90 display: flex;
91 91 align-items: center;
92 92 justify-content: center;
93 - color: var(--text-muted);
93 + color: var(--content-muted);
94 94 font-family: var(--font-mono);
95 95 }
96 96
@@ -104,7 +104,7 @@
104 104 .video-display {
105 105 max-width: 100%;
106 106 margin: 0 auto var(--gap-page);
107 - background: var(--detail);
107 + background: var(--content);
108 108 }
109 109
110 110 .video-display video {
@@ -120,7 +120,7 @@
120 120
121 121 /* Player controls */
122 122 .media-player {
123 - background: var(--light-background);
123 + background: var(--surface-overlay);
124 124 padding: var(--gap-pane);
125 125 margin-bottom: var(--gap-page);
126 126 }
@@ -158,7 +158,7 @@
158 158
159 159 .progress-bar {
160 160 height: 6px;
161 - background: var(--surface-muted);
161 + background: var(--surface-sunken);
162 162 border-radius: var(--radius-control);
163 163 overflow: hidden;
164 164 cursor: pointer;
@@ -168,7 +168,7 @@
168 168
169 169 .progress-fill {
170 170 height: 100%;
171 - background: var(--highlight);
171 + background: var(--action);
172 172 width: 0%;
173 173 border-radius: var(--radius-control);
174 174 transition: width 0.1s linear;
@@ -179,7 +179,7 @@
179 179 justify-content: space-between;
180 180 font-family: var(--font-mono);
181 181 font-size: var(--text-fine);
182 - color: var(--text-muted);
182 + color: var(--content-muted);
183 183 }
184 184
185 185 .player-secondary {
@@ -199,13 +199,13 @@
199 199 }
200 200
201 201 .speed-button {
202 - background: var(--surface-muted);
202 + background: var(--surface-sunken);
203 203 border: none;
204 204 padding: var(--gap-peer) var(--gap-section);
205 205 font-family: var(--font-mono);
206 206 font-size: var(--text-fine);
207 207 cursor: pointer;
208 - color: var(--detail);
208 + color: var(--content);
209 209 }
210 210
211 211 .speed-button:hover {
@@ -224,13 +224,13 @@
224 224 }
225 225
226 226 .volume-icon {
227 - color: var(--text-muted);
227 + color: var(--content-muted);
228 228 }
229 229
230 230 .volume-slider {
231 231 width: 80px;
232 232 height: 4px;
233 - background: var(--surface-muted);
233 + background: var(--surface-sunken);
234 234 border-radius: var(--radius-fine);
235 235 appearance: none;
236 236 cursor: pointer;
@@ -240,7 +240,7 @@
240 240 appearance: none;
241 241 width: 12px;
242 242 height: 12px;
243 - background: var(--detail);
243 + background: var(--content);
244 244 border-radius: var(--radius-round);
245 245 cursor: pointer;
246 246 }
@@ -248,7 +248,7 @@
248 248 .volume-slider::-moz-range-thumb {
249 249 width: 12px;
250 250 height: 12px;
251 - background: var(--detail);
251 + background: var(--content);
252 252 border-radius: var(--radius-round);
253 253 cursor: pointer;
254 254 border: none;
@@ -268,7 +268,7 @@
268 268
269 269 /* Chapters */
270 270 .chapters {
271 - background: var(--light-background);
271 + background: var(--surface-overlay);
272 272 padding: var(--gap-pane);
273 273 margin-bottom: var(--gap-page);
274 274 }
@@ -278,7 +278,7 @@
278 278 font-size: var(--text-body);
279 279 font-weight: normal;
280 280 margin-bottom: var(--gap-section);
281 - color: var(--detail);
281 + color: var(--content);
282 282 }
283 283
284 284 .chapter-list {
@@ -299,7 +299,7 @@
299 299 }
300 300
301 301 .chapter-item:hover {
302 - background: var(--surface-muted);
302 + background: var(--surface-sunken);
303 303 /* The bleed and the inset must stay equal or the row shifts on hover,
304 304 so both sides read the same token. */
305 305 margin: 0 calc(var(--gap-pane) * -1);
@@ -309,13 +309,13 @@
309 309
310 310 .chapter-title {
311 311 font-family: var(--font-body);
312 - color: var(--detail);
312 + color: var(--content);
313 313 }
314 314
315 315 .chapter-time {
316 316 font-family: var(--font-mono);
317 317 font-size: var(--text-note);
318 - color: var(--text-muted);
318 + color: var(--content-muted);
319 319 }
320 320
321 321 /* Tags */
@@ -330,8 +330,8 @@
330 330
331 331 .tag {
332 332 font-family: var(--font-mono);
333 - background: var(--surface-muted);
334 - color: var(--detail);
333 + background: var(--surface-sunken);
334 + color: var(--content);
335 335 padding: var(--gap-peer) var(--gap-section);
336 336 font-size: var(--text-fine);
337 337 }
@@ -342,12 +342,12 @@
342 342 text-align: center;
343 343 padding: var(--gap-page);
344 344 font-size: var(--text-note);
345 - color: var(--text-muted);
345 + color: var(--content-muted);
346 346 border-top: 1px solid var(--border);
347 347 }
348 348
349 349 .media-player-footer a {
350 - color: var(--detail);
350 + color: var(--content);
351 351 text-decoration: none;
352 352 }
353 353
@@ -364,11 +364,11 @@
364 364 .skip-insertion {
365 365 font-family: var(--font-mono);
366 366 font-size: var(--text-fine);
367 - background: var(--surface-muted);
367 + background: var(--surface-sunken);
368 368 border: 1px solid var(--border);
369 369 padding: var(--gap-peer) var(--gap-section);
370 370 cursor: pointer;
371 - color: var(--detail);
371 + color: var(--content);
372 372 display: none;
373 373 margin-top: var(--gap-peer);
374 374 }
@@ -381,7 +381,7 @@
381 381 .insertion-label {
382 382 font-family: var(--font-mono);
383 383 font-size: var(--text-fine);
384 - color: var(--text-muted);
384 + color: var(--content-muted);
385 385 font-style: italic;
386 386 display: none;
387 387 margin-top: var(--gap-bound);
M server/static/wizard.css +28 -28
@@ -39,7 +39,7 @@
39 39 gap: var(--gap-group);
40 40 padding: var(--gap-peer) 0;
41 41 font-size: var(--text-note);
42 - color: var(--text-muted);
42 + color: var(--content-muted);
43 43 position: relative;
44 44 }
45 45
@@ -54,7 +54,7 @@
54 54 }
55 55
56 56 .wizard-step-indicator.completed + .wizard-step-indicator::before {
57 - background: var(--highlight);
57 + background: var(--action);
58 58 }
59 59
60 60 .step-number {
@@ -68,34 +68,34 @@
68 68 font-weight: bold;
69 69 flex-shrink: 0;
70 70 border: 2px solid var(--border);
71 - color: var(--text-muted);
71 + color: var(--content-muted);
72 72 background: transparent;
73 73 }
74 74
75 75 .wizard-step-indicator.active .step-number {
76 - border-color: var(--highlight);
77 - background: var(--highlight);
76 + border-color: var(--action);
77 + background: var(--action);
78 78 color: var(--primary-light);
79 79 }
80 80
81 81 .wizard-step-indicator.completed .step-number {
82 - border-color: var(--highlight);
83 - color: var(--highlight);
82 + border-color: var(--action);
83 + color: var(--action);
84 84 }
85 85
86 86 .wizard-step-indicator.active .step-label {
87 - color: var(--detail);
87 + color: var(--content);
88 88 font-weight: bold;
89 89 }
90 90
91 91 .wizard-step-indicator.completed .step-label {
92 - color: var(--detail);
92 + color: var(--content);
93 93 }
94 94
95 95 /* Step Content */
96 96
97 97 .wizard-step {
98 - background: var(--light-background);
98 + background: var(--surface-overlay);
99 99 padding: var(--gap-page);
100 100 border-radius: var(--radius-control);
101 101 }
@@ -107,7 +107,7 @@
107 107 }
108 108
109 109 .step-description {
110 - color: var(--text-muted);
110 + color: var(--content-muted);
111 111 font-size: var(--text-note);
112 112 margin-bottom: var(--gap-pane);
113 113 }
@@ -156,7 +156,7 @@
156 156 top: 100%;
157 157 left: 0;
158 158 right: 0;
159 - background: var(--background);
159 + background: var(--surface-page);
160 160 border: 1px solid var(--border);
161 161 border-top: none;
162 162 border-radius: 0 0 var(--radius-control) var(--radius-control);
@@ -177,7 +177,7 @@
177 177 }
178 178
179 179 .suggestion-item:hover {
180 - background: var(--light-background);
180 + background: var(--surface-overlay);
181 181 }
182 182
183 183 .suggestion-create {
@@ -204,7 +204,7 @@
204 204 gap: var(--gap-section);
205 205 margin-top: var(--gap-peer);
206 206 padding: var(--gap-section);
207 - background: var(--surface-alt);
207 + background: var(--surface-raised);
208 208 border-radius: var(--radius-control);
209 209 }
210 210
@@ -250,7 +250,7 @@
250 250 .preview-label {
251 251 width: 180px;
252 252 flex-shrink: 0;
253 - color: var(--text-muted);
253 + color: var(--content-muted);
254 254 font-weight: bold;
255 255 }
256 256
@@ -300,7 +300,7 @@
300 300
301 301 .check-missing::before {
302 302 content: "Todo";
303 - color: var(--text-muted);
303 + color: var(--content-muted);
304 304 }
305 305
306 306 /* Upload Areas */
@@ -312,12 +312,12 @@
312 312 text-align: center;
313 313 cursor: pointer;
314 314 transition: border-color 0.15s;
315 - background: var(--background);
315 + background: var(--surface-page);
316 316 }
317 317
318 318 .upload-area:hover,
319 319 .upload-area.dragover {
320 - border-color: var(--highlight);
320 + border-color: var(--action);
321 321 }
322 322
323 323 /* Project Image Dropzone */
@@ -329,17 +329,17 @@
329 329 text-align: center;
330 330 cursor: pointer;
331 331 transition: border-color 0.15s;
332 - background: var(--background);
332 + background: var(--surface-page);
333 333 max-width: 300px;
334 334 }
335 335
336 336 .project-image-dropzone:hover,
337 337 .project-image-dropzone.dragover {
338 - border-color: var(--highlight);
338 + border-color: var(--action);
339 339 }
340 340
341 341 .project-image-placeholder {
342 - color: var(--text-muted);
342 + color: var(--content-muted);
343 343 }
344 344
345 345 .project-image-upload {
@@ -378,7 +378,7 @@
378 378
379 379 .upload-progress-inline .progress-bar {
380 380 height: 100%;
381 - background: var(--highlight);
381 + background: var(--action);
382 382 transition: width 0.2s;
383 383 }
384 384
@@ -397,7 +397,7 @@
397 397 gap: var(--gap-section);
398 398 align-items: center;
399 399 padding: var(--gap-section);
400 - background: var(--background);
400 + background: var(--surface-page);
401 401 border: 1px solid var(--border);
402 402 border-radius: var(--radius-control);
403 403 }
@@ -408,7 +408,7 @@
408 408 flex-shrink: 0;
409 409 border-radius: var(--radius-control);
410 410 overflow: hidden;
411 - background: var(--surface-muted);
411 + background: var(--surface-sunken);
412 412 }
413 413
414 414 .preview-cover img {
@@ -423,13 +423,13 @@
423 423 justify-content: center;
424 424 height: 100%;
425 425 font-size: var(--text-fine);
426 - color: var(--text-muted);
426 + color: var(--content-muted);
427 427 }
428 428
429 429 /* Distribution */
430 430
431 431 .distribution-section {
432 - background: var(--background);
432 + background: var(--surface-page);
433 433 padding: var(--gap-section);
434 434 border: 1px solid var(--border);
435 435 border-radius: var(--radius-control);
@@ -467,7 +467,7 @@
467 467 /* Info box */
468 468
469 469 .info-box {
470 - background: var(--surface-alt);
470 + background: var(--surface-raised);
471 471 padding: var(--gap-section);
472 472 border-radius: var(--radius-control);
473 473 font-size: var(--text-note);
@@ -577,7 +577,7 @@
577 577
578 578 /* Stripe-step layout. */
579 579 .stripe-connect-box {
580 - background: var(--surface-muted);
580 + background: var(--surface-sunken);
581 581 padding: var(--gap-section);
582 582 text-align: center;
583 583 margin: var(--gap-section) 0;