Skip to main content

max / balanced_breakfast

Take the design system's focus ring in Balanced Breakfast The stylesheet drew focus in --category-four yellow while makeover emits the same 2px ring at the same offset on --focus-ring, so BB was the only app of the three showing a different colour. Swap the token in all three places that draw focus: the focus-visible outline block, the input box-shadow ring, and the sort-select border. Drop .button and .tab from the outline list. Both take an identical ring from layout.css, and restating it unlayered only overrode the design system with a copy of itself. --category-four stays; 29 other consumers use it as the category token.
Author: Max Johnson <me@maxj.phd> · 2026-08-08 13:53 UTC
Signed with PGP, not checked
Commit: a1829aaf2ad1d0df7cb84c2e2ae52b82ae455471
Parent: 50a1993
1 file changed, +12 insertions, -9 deletions
@@ -356,7 +356,7 @@
356 356 font-size: var(--font-size-base);
357 357 box-shadow: var(--bevel-inset);
358 358 }
359 - .sort-select:focus { outline: none; border-color: var(--category-four); }
359 + .sort-select:focus { outline: none; border-color: var(--focus-ring); }
360 360
361 361 /* === 6. Sidebar ======================================================== */
362 362 .sidebar {
@@ -1695,20 +1695,23 @@
1695 1695 }
1696 1696
1697 1697 /* === 32. Focus indicators ==============================================
1698 - 2px yellow outline for clickable elements; 2px yellow box-shadow ring
1699 - for inputs (avoids layout shift). Rule: every new interactive
1700 - primitive must appear in one of these selector lists.
1698 + The design system's ring for BB's own clickable elements; the same colour
1699 + as a box-shadow ring for inputs, which avoids the layout shift an outline
1700 + causes on a bevelled field. Rule: every new interactive primitive must
1701 + appear in one of these selector lists.
1702 +
1703 + makeover's own primitives are absent on purpose. `.button` and `.tab` take
1704 + an identical ring from layout.css, and restating it here unlayered would
1705 + override the design system with a copy of itself.
1701 1706 ========================================================================== */
1702 - .button:focus-visible,
1703 1707 .source-item:focus-visible,
1704 1708 .star-btn:focus-visible,
1705 1709 .source-delete:focus-visible,
1706 1710 .row--article:focus-visible,
1707 - .tab:focus-visible,
1708 1711 .plugin-item:focus-visible,
1709 1712 .sort-select:focus-visible,
1710 1713 .toast-action:focus-visible {
1711 - outline: 2px solid var(--category-four);
1714 + outline: 2px solid var(--focus-ring);
1712 1715 outline-offset: 2px;
1713 1716 }
1714 1717
@@ -1720,8 +1723,8 @@
1720 1723 .form-textarea:focus, .form-textarea:focus-visible,
1721 1724 .mobile-search-input:focus, .mobile-search-input:focus-visible {
1722 1725 outline: none;
1723 - border-color: var(--category-four);
1724 - box-shadow: var(--bevel-inset), 0 0 0 2px var(--category-four);
1726 + border-color: var(--focus-ring);
1727 + box-shadow: var(--bevel-inset), 0 0 0 2px var(--focus-ring);
1725 1728 }
1726 1729
1727 1730 /* === 33. Mobile tab bar ================================================ */