Skip to main content

max / goingson

Platinum wave 5: motion triage, and drop the dead shadow tokens Of 52 transitions, 34 go and 3 lose half. What is left animates something moving through space: drawers, sheets, swipe, disclosure carets, toast enter and leave, progress fills, the toggle knob. Nothing fades a colour any more, which was the split the conversion called for. Modal enter and leave are keyframe animations and were never in scope. Three declarations were mixed and got trimmed rather than deleted. A task row keeps its removal animation and loses its hover fade; the toggle knob keeps its slide and loses its colour fade; a highlighted slide-menu item keeps its scale and loses its background fade. Two rules the triage emptied are removed with it, and section 51's stale "Smooth transitions for focus slots" comment goes with the rule it described. The transition scale stays whole even though normal and slow now have no consumer: navigational motion still needs durations, and the spec keeps the tokens deliberately. Dead in the other direction, and removed: --shadow-brutal-xs, --shadow-offset-xs and the bare --shadow-offset lost their last consumers when the panels moved to bevels. Only floats cast a drop shadow now.
Co-Authored-By
Claude Opus 5 (1M context) <noreply@anthropic.com>
Author: Max Johnson <me@maxj.phd> · 2026-07-26 23:57 UTC
Signed with PGP, not checked
Commit: 26cccf3ac8f2df25e34fd760ff2548aec3f11415
Parent: ef4464e
1 file changed, +13 insertions, -50 deletions
M src-tauri/frontend/css/styles.css +13 -50
@@ -286,15 +286,15 @@
286 286 --bevel-inset: inset 1px 1px 0 var(--bevel-dark),
287 287 inset -1px -1px 0 var(--bevel-light);
288 288
289 - /* Shadow offset scale (used by 3D action elements only) */
290 - --shadow-offset-xs: 1px;
289 + /* Drop-shadow offset scale. Only floating surfaces cast one now: raised
290 + objects are read by their bevel, so the xs step and the bare 4px offset
291 + lost their last consumers in the Platinum conversion. */
291 292 --shadow-offset-md: 3px;
292 - --shadow-offset: 4px;
293 293 --shadow-offset-lg: 6px;
294 294 --shadow-offset-xl: 8px;
295 295
296 - /* Neobrutalist shadows, actions + floats only */
297 - --shadow-brutal-xs: var(--shadow-offset-xs) var(--shadow-offset-xs) 0 var(--border);
296 + /* Hard drop shadows, floats only. Always composed with --bevel-raised:
297 + the bevel says lit object, the shadow says above the page. */
298 298 --shadow-brutal-md: var(--shadow-offset-md) var(--shadow-offset-md) 0 var(--border);
299 299 --shadow-brutal-lg: var(--shadow-offset-lg) var(--shadow-offset-lg) 0 var(--border);
300 300 --shadow-brutal-xl: var(--shadow-offset-xl) var(--shadow-offset-xl) 0 var(--border);
@@ -346,7 +346,11 @@
346 346 --line-height-normal: 1.5;
347 347 --line-height-relaxed: 1.75;
348 348
349 - /* Transition timing */
349 + /* Transition timing. The scale survives the motion triage on purpose:
350 + state changes are instant under Platinum, but navigational motion
351 + (drawers, sheets, disclosure, progress) still moves through space and
352 + still needs a duration. Only --transition-fast has a consumer today;
353 + normal and slow are kept so the scale stays whole. */
350 354 --transition-fast: 0.1s;
351 355 --transition-normal: 0.15s;
352 356 --transition-slow: 0.3s;
@@ -507,7 +511,6 @@
507 511 border: var(--border-width) solid var(--border);
508 512 border-radius: var(--radius-md);
509 513 font-weight: 600;
510 - transition: background-color 0.15s ease;
511 514 box-shadow: var(--bevel-raised);
512 515 }
513 516
@@ -559,7 +562,6 @@
559 562 font-size: var(--font-size-sm);
560 563 font-weight: 600;
561 564 cursor: pointer;
562 - transition: background-color var(--transition-fast);
563 565 box-shadow: var(--bevel-raised);
564 566 }
565 567
@@ -997,10 +999,6 @@
997 999 color: var(--content);
998 1000 }
999 1001
1000 - .data-table tbody tr {
1001 - transition: background-color 0.15s ease;
1002 - }
1003 -
1004 1002 .data-table tbody tr:hover {
1005 1003 background-color: var(--surface-overlay);
1006 1004 }
@@ -1068,7 +1066,7 @@
1068 1066 .task-row {
1069 1067 padding: 0.75rem 1.25rem;
1070 1068 border-bottom: var(--border-width) solid var(--border);
1071 - transition: background-color 0.15s ease, opacity 0.25s ease, transform 0.25s ease;
1069 + transition: opacity 0.25s ease, transform 0.25s ease;
1072 1070 cursor: pointer;
1073 1071 }
1074 1072
@@ -1338,7 +1336,6 @@
1338 1336 .event-row-virtual {
1339 1337 padding: 0.75rem 1.25rem;
1340 1338 border-bottom: var(--border-width) solid var(--border);
1341 - transition: background-color 0.15s ease;
1342 1339 cursor: pointer;
1343 1340 }
1344 1341
@@ -1450,7 +1447,6 @@
1450 1447 cursor: pointer;
1451 1448 font-weight: 600;
1452 1449 color: var(--content-secondary);
1453 - transition: background-color 0.15s ease, color 0.15s ease;
1454 1450 list-style: none;
1455 1451 }
1456 1452
@@ -1527,7 +1523,6 @@
1527 1523 background-color: var(--surface-raised);
1528 1524 border: var(--border-width) solid var(--border);
1529 1525 border-radius: var(--radius-md);
1530 - transition: background-color 0.15s ease;
1531 1526 cursor: pointer;
1532 1527 }
1533 1528
@@ -1607,7 +1602,6 @@
1607 1602 gap: 1rem;
1608 1603 padding: 1rem;
1609 1604 border-bottom: var(--border-width) solid var(--border);
1610 - transition: background-color 0.15s ease;
1611 1605 cursor: pointer;
1612 1606 }
1613 1607
@@ -1906,7 +1900,6 @@
1906 1900 display: flex;
1907 1901 align-items: center;
1908 1902 justify-content: center;
1909 - transition: background-color 0.15s ease;
1910 1903 }
1911 1904
1912 1905 .modal-close:hover {
@@ -3975,7 +3968,6 @@
3975 3968 background: none;
3976 3969 width: 100%;
3977 3970 text-align: left;
3978 - transition: background 0.1s;
3979 3971 }
3980 3972
3981 3973 .context-menu-item:hover,
@@ -4330,7 +4322,6 @@
4330 4322 /* Clickable task rows */
4331 4323 .task-row-clickable {
4332 4324 cursor: pointer;
4333 - transition: background 0.1s;
4334 4325 }
4335 4326
4336 4327 .task-row-clickable:hover {
@@ -4533,7 +4524,6 @@
4533 4524 overflow: hidden;
4534 4525 cursor: grab;
4535 4526 z-index: 10;
4536 - transition: opacity 0.15s ease, box-shadow 0.15s ease;
4537 4527 }
4538 4528
4539 4529 .timeline-item.task {
@@ -4654,7 +4644,6 @@
4654 4644 border-left: 6px solid var(--success);
4655 4645 border-radius: var(--radius-sm);
4656 4646 cursor: grab;
4657 - transition: background-color 0.1s;
4658 4647 }
4659 4648
4660 4649 .unscheduled-task:hover {
@@ -4928,7 +4917,6 @@
4928 4917 cursor: pointer;
4929 4918 padding: 0.25rem 0.5rem;
4930 4919 border-radius: var(--radius-sm);
4931 - transition: background var(--transition-fast);
4932 4920 }
4933 4921 .sync-indicator:hover { background: var(--hover-surface); }
4934 4922 .sync-dot {
@@ -4936,7 +4924,6 @@
4936 4924 height: 8px;
4937 4925 border-radius: var(--radius-full);
4938 4926 background: var(--content-muted);
4939 - transition: background var(--transition-slow);
4940 4927 flex-shrink: 0;
4941 4928 }
4942 4929 .sync-dot.connected { background: var(--success); }
@@ -4974,7 +4961,6 @@
4974 4961 border: var(--border-width-sm) solid var(--border);
4975 4962 color: var(--content);
4976 4963 cursor: pointer;
4977 - transition: background-color 0.1s;
4978 4964 text-align: left;
4979 4965 width: 100%;
4980 4966 }
@@ -5054,7 +5040,6 @@
5054 5040 border-radius: var(--radius-sm);
5055 5041 color: var(--content-secondary);
5056 5042 opacity: 0;
5057 - transition: opacity 0.15s ease;
5058 5043 }
5059 5044
5060 5045 .task-row:hover .kebab-btn,
@@ -5164,7 +5149,6 @@
5164 5149 cursor: pointer;
5165 5150 font-size: 0.75rem;
5166 5151 font-weight: 600;
5167 - transition: background-color 0.1s;
5168 5152 }
5169 5153
5170 5154 .duration-preset:hover {
@@ -5375,7 +5359,6 @@
5375 5359 font-weight: 600;
5376 5360 color: var(--content);
5377 5361 box-shadow: var(--bevel-raised);
5378 - transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
5379 5362 }
5380 5363
5381 5364 .saved-view-item:hover {
@@ -5402,7 +5385,6 @@
5402 5385
5403 5386 .saved-view-item .view-actions {
5404 5387 opacity: 0;
5405 - transition: opacity 0.1s;
5406 5388 }
5407 5389
5408 5390 .saved-view-item:hover .view-actions {
@@ -5957,7 +5939,6 @@
5957 5939 display: inline-block;
5958 5940 margin-left: 0.5rem;
5959 5941 vertical-align: middle;
5960 - transition: background-color 0.3s ease;
5961 5942 }
5962 5943 .tab-status-dot.status-none { display: none; }
5963 5944 .tab-status-dot.status-green { background-color: var(--success); }
@@ -6165,7 +6146,6 @@
6165 6146 font-weight: 700;
6166 6147 font-size: 0.8rem;
6167 6148 cursor: pointer;
6168 - transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
6169 6149 display: flex;
6170 6150 align-items: center;
6171 6151 justify-content: center;
@@ -6255,7 +6235,6 @@
6255 6235 background: var(--surface-overlay);
6256 6236 border-radius: var(--radius-md);
6257 6237 cursor: pointer;
6258 - transition: background-color var(--transition-normal);
6259 6238 }
6260 6239
6261 6240 .task-item:hover {
@@ -6330,7 +6309,6 @@
6330 6309 display: flex;
6331 6310 flex-direction: column;
6332 6311 gap: 0.5rem;
6333 - transition: background 0.15s, border-color 0.15s;
6334 6312 }
6335 6313
6336 6314 .scope-slot.filled {
@@ -6580,11 +6558,6 @@
6580 6558
6581 6559 /* 51. Weekly Review Transitions & Keyboard Navigation */
6582 6560
6583 - /* Smooth transitions for focus slots */
6584 - .focus-slot {
6585 - transition: background-color 0.2s ease-out, border-color 0.2s ease-out;
6586 - }
6587 -
6588 6561 .focus-slot.filled {
6589 6562 animation: focusSlotFill 0.3s ease-out;
6590 6563 }
@@ -6687,7 +6660,6 @@
6687 6660 justify-content: center;
6688 6661 border-radius: var(--radius-xs);
6689 6662 cursor: pointer;
6690 - transition: transform 0.1s ease;
6691 6663 border: var(--border-width-sm) solid transparent;
6692 6664 position: relative;
6693 6665 min-height: 40px;
@@ -6909,7 +6881,6 @@
6909 6881 padding: 0 4px;
6910 6882 font-size: 0.75rem;
6911 6883 opacity: 0;
6912 - transition: opacity 0.15s;
6913 6884 }
6914 6885
6915 6886 .month-goal-item:hover .month-goal-delete-btn {
@@ -7030,7 +7001,6 @@
7030 7001 border-radius: var(--radius-sm);
7031 7002 cursor: pointer;
7032 7003 text-align: left;
7033 - transition: border-color var(--transition-fast), background var(--transition-fast);
7034 7004 }
7035 7005
7036 7006 .plugin-option:hover {
@@ -7171,7 +7141,6 @@
7171 7141 border: var(--border-width) solid var(--border);
7172 7142 border-radius: var(--radius-md);
7173 7143 cursor: pointer;
7174 - transition: border-color 0.15s, background 0.15s;
7175 7144 }
7176 7145
7177 7146 .import-type-card:hover {
@@ -7263,7 +7232,6 @@
7263 7232 background-color: var(--surface-sunken);
7264 7233 border: var(--border-width) solid var(--border);
7265 7234 border-radius: var(--radius-xl);
7266 - transition: background-color var(--transition-fast), border-color var(--transition-fast);
7267 7235 }
7268 7236
7269 7237 .toggle-slider:before {
@@ -7275,7 +7243,7 @@
7275 7243 bottom: 2px;
7276 7244 background-color: var(--content-muted);
7277 7245 border-radius: var(--radius-full);
7278 - transition: transform var(--transition-fast), background-color var(--transition-fast);
7246 + transition: transform var(--transition-fast);
7279 7247 }
7280 7248
7281 7249 .toggle-switch input:checked + .toggle-slider {
@@ -7319,7 +7287,6 @@
7319 7287 border-radius: var(--radius-md);
7320 7288 padding: 1rem;
7321 7289 margin-bottom: 0.75rem;
7322 - transition: background-color 0.1s;
7323 7290 box-shadow: var(--bevel-raised);
7324 7291 }
7325 7292
@@ -7393,7 +7360,6 @@
7393 7360 border-radius: var(--radius-sm);
7394 7361 cursor: pointer;
7395 7362 color: var(--content-secondary);
7396 - transition: background var(--transition-fast);
7397 7363 }
7398 7364
7399 7365 .milestone-actions button:hover {
@@ -7475,7 +7441,6 @@
7475 7441 letter-spacing: 0.05em;
7476 7442 cursor: pointer;
7477 7443 -webkit-tap-highlight-color: transparent;
7478 - transition: color 0.15s ease;
7479 7444 }
7480 7445
7481 7446 .mobile-tab.active {
@@ -7531,7 +7496,7 @@
7531 7496 letter-spacing: 0.05em;
7532 7497 color: var(--content);
7533 7498 border-radius: var(--radius-sm);
7534 - transition: background 80ms ease, transform 80ms ease;
7499 + transition: transform 80ms ease;
7535 7500 }
7536 7501
7537 7502 .mobile-tab-slide-item.is-highlighted {
@@ -8553,7 +8518,6 @@
8553 8518 font-family: var(--font-body);
8554 8519 font-size: var(--font-size-md);
8555 8520 cursor: pointer;
8556 - transition: background var(--transition-fast), box-shadow var(--transition-fast);
8557 8521 }
8558 8522
8559 8523 .view-toggle-btn.active {
@@ -9429,7 +9393,6 @@
9429 9393 border: var(--border-width-sm) solid var(--border);
9430 9394 padding: 0.25rem;
9431 9395 cursor: pointer;
9432 - transition: background var(--transition-fast);
9433 9396 }
9434 9397
9435 9398 .cal-month-cell:hover {