max / balanced_breakfast
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 ================================================ */ |