Skip to main content

max / goingson

Take button and card depth from the generated stylesheet First real deletion of the makeover-webview adoption. The generated layout.css carries .button, .card and their hover and pressed states, so the hand-written copies here go. Removed: background and box-shadow from .button and .card, and the .button:hover, .button:active, .card:hover and .card:active rules entirely. What stays is everything that was never depth -- box model, type, cursor -- plus the variants, which still win over the generated states on source order (layout.css loads before this file). Two visible changes, both consequences of the phase A decisions rather than of this commit: - Hover moves from --surface-overlay to --hover-surface. - Pressing moves from --surface-sunken to --surface-well. Since surface-well inverts by theme where surface-sunken does not, a dark theme now presses lighter than it hovers. That is makeover's derivation talking, and the note on it is in wiki makeover-webview. Also fixes a pre-existing inconsistency it would otherwise have carried forward: .button:disabled:active overrode only box-shadow, so a disabled button took the pressed fill while keeping the raised edge. Disabled is inert on both properties now.
Co-Authored-By
Claude Opus 5 (1M context) <noreply@anthropic.com>
Author: Max Johnson <me@maxj.phd> · 2026-07-29 21:31 UTC
Signed with PGP, not checked
Commit: 325835dd2d8850db864ea15f29d1bab2dc3badab
Parent: 42ad3bc
1 file changed, +21 insertions, -30 deletions
@@ -640,7 +640,15 @@
640 640 display: block;
641 641 }
642 642
643 - /* 9. Buttons */
643 + /* 9. Buttons
644 +
645 + Depth lives in the generated layout.css now: `.button`, `.button:hover` and
646 + `.button:active` come from makeover-webview, which emits the fill and the
647 + edge together so they cannot disagree. What stays here is everything that is
648 + not depth -- box model, type, cursor -- plus the disabled overrides below.
649 +
650 + Pressing therefore reads as a well rather than as --surface-sunken, which is
651 + the description's answer (Depth::pressed) rather than this file's. */
644 652 .button {
645 653 display: inline-flex;
646 654 align-items: center;
@@ -653,20 +661,7 @@
653 661 font-weight: 600;
654 662 cursor: pointer;
655 663 text-decoration: none;
656 - background: var(--surface-raised);
657 664 color: var(--content);
658 - box-shadow: var(--bevel-raised);
659 - }
660 -
661 - .button:hover {
662 - background: var(--surface-overlay);
663 - }
664 -
665 - /* Pressed inverts the bevel and drops the fill a step, which is the whole
666 - idiom: no offset, no translate, the button reads as pushed into the page. */
667 - .button:active {
668 - background: var(--surface-sunken);
669 - box-shadow: var(--bevel-inset);
670 665 }
671 666
672 667 /* Disabled keeps its bevel. The object is still there, its label is just
@@ -677,11 +672,14 @@
677 672 cursor: not-allowed;
678 673 }
679 674
680 - .button:disabled:hover {
681 - background: var(--surface-raised);
682 - }
683 -
675 + /* Inert on both, and both properties on both selectors. Overriding only
676 + box-shadow on :active left a disabled button taking the pressed fill while
677 + keeping the raised edge, which is the fill-and-edge disagreement the
678 + generated rules exist to prevent. Higher specificity than the generated
679 + .button:hover and .button:active, so these win. */
680 + .button:disabled:hover,
684 681 .button:disabled:active {
682 + background: var(--surface-raised);
685 683 box-shadow: var(--bevel-raised);
686 684 }
687 685
@@ -765,25 +763,18 @@
765 763 font-size: var(--font-size-sm);
766 764 }
767 765
766 + /* Depth comes from the generated layout.css, same as .button: a card and a
767 + button are one composition with two names, which is why this file used to
768 + hold two hand-written copies of it. The variants below still override the
769 + generated :hover and :active -- equal specificity, and this file loads
770 + after layout.css, so they win. */
768 771 .card {
769 - background-color: var(--surface-raised);
770 772 border: var(--border-width) solid var(--border);
771 773 border-radius: var(--radius-md);
772 774 padding: var(--gap-group);
773 - box-shadow: var(--bevel-raised);
774 775 cursor: pointer;
775 776 }
776 777
777 - .card:hover {
778 - background-color: var(--surface-overlay);
779 - }
780 -
781 - /* A clickable card presses like a button. */
782 - .card:active {
783 - background-color: var(--surface-sunken);
784 - box-shadow: var(--bevel-inset);
785 - }
786 -
787 778 /* Compact card for use in dense vertical lists (e.g. Project Dashboard).
788 779 Tighter padding, adds list spacing. */
789 780 .card--list-item {