Skip to main content

max / goingson

Put the bypassed scale tokens back to work The six tokens the dead-token audit turned up were not dead, they were bypassed by literals that matched their values exactly. Converting the consumers rather than deleting the tokens: every custom property in the file now has a reader. 26 font sizes move onto --font-size-xl through 4xl, 38 spacing literals onto --space-6, and .day-plan-sidebar's width onto --width-sidebar. Two places the value match was a coincidence rather than a use of the scale, and both keep their literal. .context-menu's max-width is 280px because that is a readable menu width, not because it is a sidebar. The @media print block sets fixed sizes deliberately, since a themed scale is the wrong thing to print against. Tokenising only the 1.5rem component left 11 shorthands with a token beside a bare literal, which reads worse than either extreme, so their on-scale companions went too: 8 more onto --space-1 through 5. Three companions had nowhere to go, and they are the useful finding here. .main-content pads 1.75rem and 2rem, .settings-content 2rem, .finish-review-btn 0.65rem. The spacing scale stops at 1.5rem, so the app's largest paddings are all off-scale by construction. Either the scale wants a step or two above --space-6, or those three want to come down onto it.
Co-Authored-By
Claude Opus 5 (1M context) <noreply@anthropic.com>
Author: Max Johnson <me@maxj.phd> · 2026-07-27 00:52 UTC
Signed with PGP, not checked
Commit: 0ee63d2192f6473b22b5002d01873826eff3fd95
Parent: 6054f76
1 file changed, +64 insertions, -64 deletions
@@ -366,7 +366,7 @@
366 366 .form-select--compact { width: auto; min-width: 120px; }
367 367
368 368 /* --- SETTINGS UTILITIES */
369 - .settings-divider { margin-top: 1.5rem; padding-top: 1.5rem; border-top: var(--border-width) solid var(--border); }
369 + .settings-divider { margin-top: var(--space-6); padding-top: var(--space-6); border-top: var(--border-width) solid var(--border); }
370 370 .settings-heading { margin-bottom: 1rem; font-family: var(--font-heading); }
371 371 .settings-desc { font-size: 0.875rem; color: var(--content-secondary); margin-bottom: 1rem; }
372 372
@@ -439,7 +439,7 @@
439 439 .ui-mode-desktop .app-header {
440 440 background: var(--surface-raised);
441 441 border-bottom: var(--border-width) solid var(--border);
442 - padding: 0.75rem 1.5rem;
442 + padding: var(--space-3) var(--space-6);
443 443 display: flex;
444 444 justify-content: space-between;
445 445 align-items: center;
@@ -459,7 +459,7 @@
459 459
460 460 .ui-mode-desktop .app-title {
461 461 font-family: var(--font-display);
462 - font-size: 1.75rem;
462 + font-size: var(--font-size-4xl);
463 463 font-weight: 700;
464 464 color: var(--content);
465 465 letter-spacing: -0.02em;
@@ -510,7 +510,7 @@
510 510 }
511 511
512 512 .ui-mode-desktop .tab-icon {
513 - font-size: 1.1rem;
513 + font-size: var(--font-size-xl);
514 514 }
515 515
516 516 .ui-mode-desktop .tab-label {
@@ -566,7 +566,7 @@
566 566 max-width: var(--width-container);
567 567 width: 100%;
568 568 margin: 0 auto;
569 - padding: 1.5rem 1.75rem 2rem;
569 + padding: var(--space-6) 1.75rem 2rem;
570 570 }
571 571
572 572 /* Page Header */
@@ -580,7 +580,7 @@
580 580
581 581 .page-title {
582 582 font-family: var(--font-heading);
583 - font-size: 1.75rem;
583 + font-size: var(--font-size-4xl);
584 584 font-weight: 700;
585 585 color: var(--content);
586 586 }
@@ -804,7 +804,7 @@
804 804
805 805 .card-title {
806 806 font-family: var(--font-heading);
807 - font-size: 1.1rem;
807 + font-size: var(--font-size-xl);
808 808 font-weight: 700;
809 809 color: var(--content);
810 810 }
@@ -1525,7 +1525,7 @@
1525 1525 }
1526 1526
1527 1527 .event-date-num {
1528 - font-size: 1.5rem;
1528 + font-size: var(--font-size-3xl);
1529 1529 font-weight: 700;
1530 1530 }
1531 1531
@@ -1536,7 +1536,7 @@
1536 1536 .event-title {
1537 1537 font-family: var(--font-heading);
1538 1538 font-weight: 700;
1539 - font-size: 1.1rem;
1539 + font-size: var(--font-size-xl);
1540 1540 color: var(--content);
1541 1541 margin-bottom: 0.25rem;
1542 1542 }
@@ -1785,14 +1785,14 @@
1785 1785 display: flex;
1786 1786 justify-content: space-between;
1787 1787 align-items: center;
1788 - padding: 1rem 1.5rem;
1788 + padding: var(--space-4) var(--space-6);
1789 1789 border-bottom: var(--border-width) solid var(--border);
1790 1790 background: var(--surface-overlay);
1791 1791 }
1792 1792
1793 1793 .modal-header h2, .modal-title {
1794 1794 font-family: var(--font-heading);
1795 - font-size: 1.25rem;
1795 + font-size: var(--font-size-2xl);
1796 1796 font-weight: 700;
1797 1797 }
1798 1798
@@ -1800,7 +1800,7 @@
1800 1800 background: var(--surface-raised);
1801 1801 border: var(--border-width-sm) solid var(--border);
1802 1802 border-radius: var(--radius-sm);
1803 - font-size: 1.25rem;
1803 + font-size: var(--font-size-2xl);
1804 1804 color: var(--content);
1805 1805 cursor: pointer;
1806 1806 line-height: 1;
@@ -1817,7 +1817,7 @@
1817 1817 }
1818 1818
1819 1819 .modal-content {
1820 - padding: 1.5rem;
1820 + padding: var(--space-6);
1821 1821 }
1822 1822
1823 1823 /* Pin a form's action row to the bottom of the modal's scroll area so
@@ -1829,7 +1829,7 @@
1829 1829 .modal-content form > .form-actions:last-child {
1830 1830 position: sticky;
1831 1831 bottom: 0;
1832 - margin-top: 1.5rem;
1832 + margin-top: var(--space-6);
1833 1833 padding-top: 0.75rem;
1834 1834 padding-bottom: 0.25rem;
1835 1835 background: var(--surface-raised);
@@ -1952,7 +1952,7 @@
1952 1952 display: flex;
1953 1953 justify-content: flex-end;
1954 1954 gap: 0.75rem;
1955 - margin-top: 1.5rem;
1955 + margin-top: var(--space-6);
1956 1956 }
1957 1957
1958 1958 /* Form Validation */
@@ -2760,7 +2760,7 @@
2760 2760 }
2761 2761 .email-subject-line {
2762 2762 font-weight: 600;
2763 - font-size: 1.1rem;
2763 + font-size: var(--font-size-xl);
2764 2764 }
2765 2765 .email-meta-line {
2766 2766 font-size: var(--font-size-sm);
@@ -3196,7 +3196,7 @@
3196 3196 .app-footer {
3197 3197 background-color: var(--surface-raised);
3198 3198 border-top: var(--border-width) solid var(--border);
3199 - padding: 0.75rem 1.5rem;
3199 + padding: var(--space-3) var(--space-6);
3200 3200 }
3201 3201
3202 3202 .footer-content {
@@ -3277,7 +3277,7 @@
3277 3277 }
3278 3278
3279 3279 .empty-state-text {
3280 - font-size: 1.1rem;
3280 + font-size: var(--font-size-xl);
3281 3281 font-weight: 600;
3282 3282 margin-bottom: 1rem;
3283 3283 }
@@ -3314,7 +3314,7 @@
3314 3314 display: flex;
3315 3315 flex-wrap: wrap;
3316 3316 gap: 0.75rem;
3317 - margin-bottom: 1.5rem;
3317 + margin-bottom: var(--space-6);
3318 3318 padding: 1rem;
3319 3319 background-color: var(--surface-raised);
3320 3320 border: var(--border-width) solid var(--border);
@@ -3458,7 +3458,7 @@
3458 3458 }
3459 3459
3460 3460 .ui-mode-mobile .tab-icon {
3461 - font-size: 1.25rem;
3461 + font-size: var(--font-size-2xl);
3462 3462 }
3463 3463
3464 3464 .ui-mode-mobile .kbd-hint {
@@ -3493,7 +3493,7 @@
3493 3493 }
3494 3494
3495 3495 .ui-mode-mobile .page-title {
3496 - font-size: 1.5rem;
3496 + font-size: var(--font-size-3xl);
3497 3497 }
3498 3498
3499 3499 .ui-mode-mobile .saved-views-sidebar {
@@ -3603,7 +3603,7 @@
3603 3603 left: 0;
3604 3604 background: var(--action);
3605 3605 color: var(--content-on-action);
3606 - padding: 0.75rem 1.5rem;
3606 + padding: var(--space-3) var(--space-6);
3607 3607 z-index: 9999;
3608 3608 font-weight: 700;
3609 3609 border: var(--border-width) solid var(--border);
@@ -4097,7 +4097,7 @@
4097 4097 .project-dashboard-grid {
4098 4098 display: grid;
4099 4099 grid-template-columns: repeat(3, 1fr);
4100 - gap: 1.5rem;
4100 + gap: var(--space-6);
4101 4101 flex: 1;
4102 4102 min-height: 0;
4103 4103 }
@@ -4304,7 +4304,7 @@
4304 4304 }
4305 4305
4306 4306 .day-plan-date-display {
4307 - font-size: 1.25rem;
4307 + font-size: var(--font-size-2xl);
4308 4308 font-weight: 700;
4309 4309 margin-left: 1rem;
4310 4310 font-family: var(--font-heading);
@@ -4315,7 +4315,7 @@
4315 4315 flex: 1;
4316 4316 min-height: 0;
4317 4317 display: flex;
4318 - gap: 1.5rem;
4318 + gap: var(--space-6);
4319 4319 }
4320 4320
4321 4321 .day-plan-main {
@@ -4331,7 +4331,7 @@
4331 4331 }
4332 4332
4333 4333 .day-plan-sidebar {
4334 - width: 280px;
4334 + width: var(--width-sidebar);
4335 4335 flex-shrink: 0;
4336 4336 display: flex;
4337 4337 flex-direction: column;
@@ -4683,7 +4683,7 @@
4683 4683 width: 200px;
4684 4684 flex-shrink: 0;
4685 4685 border-right: var(--border-width) solid var(--border);
4686 - padding: 1.5rem 0;
4686 + padding: var(--space-6) 0;
4687 4687 display: flex;
4688 4688 flex-direction: column;
4689 4689 gap: 0.25rem;
@@ -4716,7 +4716,7 @@
4716 4716
4717 4717 .settings-content {
4718 4718 flex: 1;
4719 - padding: 1.5rem 2rem;
4719 + padding: var(--space-6) 2rem;
4720 4720 max-width: 640px;
4721 4721 overflow-y: auto;
4722 4722 }
@@ -4726,7 +4726,7 @@
4726 4726 display: flex;
4727 4727 align-items: center;
4728 4728 gap: 1.25rem;
4729 - margin-bottom: 1.5rem;
4729 + margin-bottom: var(--space-6);
4730 4730 }
4731 4731
4732 4732
@@ -4736,7 +4736,7 @@
4736 4736 display: flex;
4737 4737 flex-direction: column;
4738 4738 gap: 0.375rem;
4739 - margin-bottom: 1.5rem;
4739 + margin-bottom: var(--space-6);
4740 4740 padding: 1rem;
4741 4741 }
4742 4742
@@ -4746,8 +4746,8 @@
4746 4746
4747 4747 .contact-dashboard-summary {
4748 4748 display: flex;
4749 - gap: 1.5rem;
4750 - margin-bottom: 1.5rem;
4749 + gap: var(--space-6);
4750 + margin-bottom: var(--space-6);
4751 4751 }
4752 4752
4753 4753 .contact-summary-stat {
@@ -4761,7 +4761,7 @@
4761 4761 }
4762 4762
4763 4763 .contact-summary-count {
4764 - font-size: 1.5rem;
4764 + font-size: var(--font-size-3xl);
4765 4765 font-weight: 700;
4766 4766 color: var(--content);
4767 4767 }
@@ -4956,7 +4956,7 @@
4956 4956
4957 4957 /* Kebab menu button, extends .btn-icon with hover-reveal + bigger font. */
4958 4958 .kebab-btn {
4959 - font-size: 1.1rem;
4959 + font-size: var(--font-size-xl);
4960 4960 padding: 0.2rem 0.4rem;
4961 4961 border-radius: var(--radius-sm);
4962 4962 color: var(--content-secondary);
@@ -5261,7 +5261,7 @@
5261 5261
5262 5262 .sidebar-empty {
5263 5263 text-align: center;
5264 - padding: 1.5rem 0.5rem;
5264 + padding: var(--space-6) var(--space-2);
5265 5265 color: var(--content-muted);
5266 5266 font-size: 0.8rem;
5267 5267 }
@@ -5377,7 +5377,7 @@
5377 5377 }
5378 5378
5379 5379 .contact-detail .contact-notes {
5380 - margin-bottom: 1.5rem;
5380 + margin-bottom: var(--space-6);
5381 5381 }
5382 5382
5383 5383 .contact-detail .contact-notes p {
@@ -5780,14 +5780,14 @@
5780 5780 display: flex;
5781 5781 justify-content: space-between;
5782 5782 align-items: center;
5783 - margin-bottom: 1.5rem;
5783 + margin-bottom: var(--space-6);
5784 5784 padding-bottom: 1rem;
5785 5785 border-bottom: var(--border-width-sm) solid var(--border);
5786 5786 }
5787 5787
5788 5788 .week-dates {
5789 5789 font-family: var(--font-heading);
5790 - font-size: 1.25rem;
5790 + font-size: var(--font-size-2xl);
5791 5791 font-weight: 700;
5792 5792 color: var(--content);
5793 5793 }
@@ -5859,7 +5859,7 @@
5859 5859 .review-grid {
5860 5860 display: grid;
5861 5861 grid-template-columns: 1fr 1fr;
5862 - gap: 1.5rem;
5862 + gap: var(--space-6);
5863 5863 max-width: 1200px;
5864 5864 margin: 0 auto;
5865 5865 }
@@ -5868,7 +5868,7 @@
5868 5868 `.card .card--static .review-card`; chrome inherits from .card. Only the
5869 5869 padding bump (+0.25rem) and the review-scoped descendants live here. */
5870 5870 .review-card {
5871 - padding: 1.5rem;
5871 + padding: var(--space-6);
5872 5872 }
5873 5873
5874 5874 .review-card .card-header {
@@ -5884,7 +5884,7 @@
5884 5884 }
5885 5885
5886 5886 .review-card .card-icon {
5887 - font-size: 1.25rem;
5887 + font-size: var(--font-size-2xl);
5888 5888 }
5889 5889
5890 5890 .review-card .card-badge {
@@ -5938,7 +5938,7 @@
5938 5938 }
5939 5939
5940 5940 .timeline-day .day-number {
5941 - font-size: 1.1rem;
5941 + font-size: var(--font-size-xl);
5942 5942 font-weight: 700;
5943 5943 }
5944 5944
@@ -6495,7 +6495,7 @@
6495 6495
6496 6496 .weekly-review-nav .week-dates {
6497 6497 font-family: var(--font-heading);
6498 - font-size: 1.25rem;
6498 + font-size: var(--font-size-2xl);
6499 6499 font-weight: 700;
6500 6500 color: var(--content);
6501 6501 margin-left: 0.5rem;
@@ -6503,7 +6503,7 @@
6503 6503
6504 6504 .monthly-review-month-display {
6505 6505 font-family: var(--font-heading);
6506 - font-size: 1.25rem;
6506 + font-size: var(--font-size-2xl);
6507 6507 font-weight: 700;
6508 6508 color: var(--content);
6509 6509 margin-left: 0.5rem;
@@ -6517,7 +6517,7 @@
6517 6517
6518 6518 /* Heat Map Calendar */
6519 6519 .month-heatmap {
6520 - margin-bottom: 1.5rem;
6520 + margin-bottom: var(--space-6);
6521 6521 border: var(--border-width-sm) solid var(--border);
6522 6522 border-radius: var(--radius-md);
6523 6523 padding: 1rem;
@@ -6663,7 +6663,7 @@
6663 6663
6664 6664 .month-stat-value {
6665 6665 font-family: var(--font-heading);
6666 - font-size: 1.5rem;
6666 + font-size: var(--font-size-3xl);
6667 6667 font-weight: 700;
6668 6668 color: var(--content);
6669 6669 }
@@ -6862,7 +6862,7 @@
6862 6862 .import-wizard {
6863 6863 display: flex;
6864 6864 flex-direction: column;
6865 - gap: 1.5rem;
6865 + gap: var(--space-6);
6866 6866 }
6867 6867
6868 6868 .import-step {
@@ -7020,7 +7020,7 @@
7020 7020 .import-external-types {
7021 7021 display: flex;
7022 7022 gap: 1rem;
7023 - margin-bottom: 1.5rem;
7023 + margin-bottom: var(--space-6);
7024 7024 }
7025 7025
7026 7026 .import-type-card {
@@ -7029,7 +7029,7 @@
7029 7029 flex-direction: column;
7030 7030 align-items: center;
7031 7031 gap: 0.5rem;
7032 - padding: 1.5rem 1rem;
7032 + padding: var(--space-6) var(--space-4);
7033 7033 background: var(--surface-raised);
7034 7034 border: var(--border-width) solid var(--border);
7035 7035 border-radius: var(--radius-md);
@@ -7154,7 +7154,7 @@
7154 7154
7155 7155 /* 56. Project Milestones */
7156 7156 .milestones-section {
7157 - margin-bottom: 1.5rem;
7157 + margin-bottom: var(--space-6);
7158 7158 }
7159 7159
7160 7160 .milestones-header {
@@ -8538,7 +8538,7 @@
8538 8538
8539 8539 .focus-label {
8540 8540 font-family: var(--font-heading);
8541 - font-size: 1.25rem;
8541 + font-size: var(--font-size-2xl);
8542 8542 font-weight: 700;
8543 8543 }
8544 8544
@@ -8558,7 +8558,7 @@
8558 8558 font-size: 4rem;
8559 8559 font-weight: 700;
8560 8560 line-height: 1;
8561 - margin-bottom: 1.5rem;
8561 + margin-bottom: var(--space-6);
8562 8562 color: var(--content);
8563 8563 }
8564 8564
@@ -8566,7 +8566,7 @@
8566 8566 height: 6px;
8567 8567 background: var(--surface-sunken);
8568 8568 border-radius: var(--radius-xs);
8569 - margin-bottom: 1.5rem;
8569 + margin-bottom: var(--space-6);
8570 8570 overflow: hidden;
8571 8571 }
8572 8572
@@ -8792,7 +8792,7 @@
8792 8792 background: var(--surface-overlay);
8793 8793 border: var(--border-width) solid var(--action);
8794 8794 border-radius: var(--radius-md);
8795 - margin-bottom: 1.5rem;
8795 + margin-bottom: var(--space-6);
8796 8796 }
8797 8797
8798 8798 .timer-active-info {
@@ -8820,7 +8820,7 @@
8820 8820
8821 8821 .timer-active-elapsed {
8822 8822 font-family: var(--font-mono, monospace);
8823 - font-size: 1.25rem;
8823 + font-size: var(--font-size-2xl);
8824 8824 font-weight: 700;
8825 8825 color: var(--action);
8826 8826 min-width: 5rem;
@@ -8952,7 +8952,7 @@
8952 8952 /* 67. Task Overview */
8953 8953
8954 8954 .task-overview-section {
8955 - margin-bottom: 1.5rem;
8955 + margin-bottom: var(--space-6);
8956 8956 padding: 1rem;
8957 8957 background: var(--surface-raised);
8958 8958 border: var(--border-width) solid var(--border);
@@ -8991,7 +8991,7 @@
8991 8991
8992 8992 .task-overview-stat-value {
8993 8993 font-family: var(--font-heading);
8994 - font-size: 1.25rem;
8994 + font-size: var(--font-size-2xl);
8995 8995 font-weight: 700;
8996 8996 }
8997 8997
@@ -9148,15 +9148,15 @@
9148 9148 .finish-review-bar {
9149 9149 display: flex;
9150 9150 justify-content: flex-end;
9151 - padding: 1.5rem 0 1rem;
9152 - margin-top: 1.5rem;
9151 + padding: var(--space-6) 0 var(--space-4);
9152 + margin-top: var(--space-6);
9153 9153 border-top: var(--border-width) dashed var(--border);
9154 9154 }
9155 9155
9156 9156 .finish-review-btn {
9157 9157 position: relative;
9158 9158 font-size: var(--font-size-lg);
9159 - padding: 0.65rem 1.5rem;
9159 + padding: 0.65rem var(--space-6);
9160 9160 }
9161 9161
9162 9162 .finish-review-modal-content {
@@ -9175,7 +9175,7 @@
9175 9175 }
9176 9176
9177 9177 .day-accomplished-inline {
9178 - margin-top: 1.5rem;
9178 + margin-top: var(--space-6);
9179 9179 }
9180 9180
9181 9181 .day-accomplished-inline:empty {
@@ -9203,7 +9203,7 @@
9203 9203
9204 9204 .calendar-nav-label {
9205 9205 font-family: var(--font-heading);
9206 - font-size: 1.1rem;
9206 + font-size: var(--font-size-xl);
9207 9207 font-weight: 700;
9208 9208 margin-left: 0.5rem;
9209 9209 }
@@ -9619,7 +9619,7 @@
9619 9619 }
9620 9620
9621 9621 .cp-icon {
9622 - font-size: 1.1rem;
9622 + font-size: var(--font-size-xl);
9623 9623 opacity: 0.5;
9624 9624 }
9625 9625
@@ -9667,7 +9667,7 @@
9667 9667 }
9668 9668
9669 9669 .cp-hint, .cp-empty {
9670 - padding: 1.5rem 1rem;
9670 + padding: var(--space-6) var(--space-4);
9671 9671 text-align: center;
9672 9672 font-size: 0.85rem;
9673 9673 color: var(--content-secondary);