Skip to main content

max / balanced_breakfast

Fill raised surfaces with surface-raised, per audiofiles Twelve rules carried a raised bevel over the wrong fill: nine over surface-page, which is the well colour, and three (.tag, .badge, kbd) over surface-sunken. audiofiles names the rule in raised_frame and records having already fixed this exact bug, where banners were filled surface_sunken while being shaped like neither a well nor a card. GoingsOn already agreed with audiofiles at 30 of 35 raised sites, including .btn, .toast, .modal-container and .context-menu, so this was BB diverging from both rather than a genuine three-way disagreement. Raised is surface-raised plus the raised bevel; a well is surface-page plus the inset bevel until makeover 2.3.0's surface-well is published. Overlay-filled floats keep surface-overlay: a float above the page is a different intent from a card on it.
Author: Max Johnson <me@maxj.phd> · 2026-07-28 21:04 UTC
Signed with PGP, not checked
Commit: 5797535e817f2e612c3df6aa4e6935f7a746877a
Parent: a141619
1 file changed, +12 insertions, -12 deletions
M src-tauri/frontend/css/styles.css +12 -12
@@ -584,7 +584,7 @@
584 584 padding: var(--gap-peer) var(--gap-group);
585 585 border: var(--border-width) solid var(--border);
586 586 border-radius: var(--radius-sm);
587 - background-color: var(--surface-page);
587 + background-color: var(--surface-raised);
588 588 color: var(--content);
589 589 cursor: pointer;
590 590 font-weight: 600;
@@ -793,7 +793,7 @@
793 793 }
794 794
795 795 .modal-content {
796 - background-color: var(--surface-page);
796 + background-color: var(--surface-raised);
797 797 border-radius: var(--radius-lg);
798 798 width: 90%;
799 799 max-width: 500px;
@@ -839,7 +839,7 @@
839 839 border-radius: var(--radius-sm);
840 840 margin-bottom: var(--gap-peer);
841 841 cursor: pointer;
842 - background-color: var(--surface-page);
842 + background-color: var(--surface-raised);
843 843 box-shadow: var(--bevel-raised);
844 844 }
845 845 .plugin-item:hover {
@@ -958,7 +958,7 @@
958 958 }
959 959
960 960 .toast {
961 - background-color: var(--surface-page);
961 + background-color: var(--surface-raised);
962 962 border: var(--border-width) solid var(--border);
963 963 border-radius: var(--radius-sm);
964 964 padding: var(--gap-peer) var(--gap-group);
@@ -1010,7 +1010,7 @@
1010 1010 .tag with a click-to-filter modifier.
1011 1011 ========================================================================== */
1012 1012 .tag {
1013 - background-color: var(--surface-sunken);
1013 + background-color: var(--surface-raised);
1014 1014 border: var(--border-width) solid var(--border);
1015 1015 border-radius: var(--radius-sm);
1016 1016 padding: var(--step-hair) var(--step-base);
@@ -1037,7 +1037,7 @@
1037 1037 display: inline-flex;
1038 1038 align-items: center;
1039 1039 gap: var(--gap-bound);
1040 - background-color: var(--surface-sunken);
1040 + background-color: var(--surface-raised);
1041 1041 border: var(--border-width) solid var(--border);
1042 1042 border-radius: var(--radius-sm);
1043 1043 padding: 0 var(--step-snug);
@@ -1086,7 +1086,7 @@
1086 1086 .context-menu {
1087 1087 position: fixed;
1088 1088 z-index: 1100;
1089 - background: var(--surface-page);
1089 + background: var(--surface-raised);
1090 1090 border: var(--border-width) solid var(--border);
1091 1091 border-radius: var(--radius-sm);
1092 1092 box-shadow: var(--bevel-raised), var(--shadow-brutal);
@@ -1336,7 +1336,7 @@
1336 1336
1337 1337
1338 1338 .source-count {
1339 - background-color: var(--surface-page);
1339 + background-color: var(--surface-raised);
1340 1340 padding: var(--step-hair) var(--step-snug);
1341 1341 border-radius: var(--radius-xl);
1342 1342 font-size: var(--font-size-xs);
@@ -1374,7 +1374,7 @@
1374 1374 background-color: var(--surface-overlay);
1375 1375 }
1376 1376 .tag-chip {
1377 - background-color: var(--surface-page);
1377 + background-color: var(--surface-raised);
1378 1378 border: var(--border-width) solid var(--border);
1379 1379 border-radius: var(--radius-xl);
1380 1380 padding: var(--step-hair) var(--step-base);
@@ -1576,7 +1576,7 @@
1576 1576 font-size: var(--font-size-base);
1577 1577 }
1578 1578 .help-row kbd {
1579 - background: var(--surface-sunken);
1579 + background: var(--surface-raised);
1580 1580 border: var(--border-width) solid var(--border);
1581 1581 border-radius: var(--radius-sm);
1582 1582 box-shadow: var(--bevel-raised);
@@ -1745,7 +1745,7 @@
1745 1745 bottom: calc(52px + env(safe-area-inset-bottom));
1746 1746 right: 0.5rem;
1747 1747 z-index: 1101;
1748 - background-color: var(--surface-page);
1748 + background-color: var(--surface-raised);
1749 1749 border: var(--border-width) solid var(--border);
1750 1750 border-radius: var(--radius-sm);
1751 1751 box-shadow: var(--bevel-raised), 0 calc(-1 * var(--shadow-offset)) 0 var(--shadow-color);
@@ -1964,7 +1964,7 @@
1964 1964 .star-btn.starred:hover { color: var(--category-four); }
1965 1965 .tag-chip:hover { border-color: var(--border); color: var(--content-secondary); }
1966 1966 .tag-chip.active:hover { border-color: var(--category-four); }
1967 - .plugin-item:hover { border-color: var(--border); background-color: var(--surface-page); box-shadow: var(--bevel-raised); }
1967 + .plugin-item:hover { border-color: var(--border); background-color: var(--surface-raised); box-shadow: var(--bevel-raised); }
1968 1968 .context-menu-item:hover { background-color: transparent; }
1969 1969 }
1970 1970