CS-11328: robust primary BoxelButton focus ring; darken with the fill#5116
Merged
Conversation
Contributor
Preview deploymentsHost Test Results 1 files 1 suites 1h 50m 56s ⏱️ Results for commit 1a4bd34. Realm Server Test Results 1 files ±0 1 suites ±0 13m 17s ⏱️ + 1m 36s Results for commit 1a4bd34. ± Comparison against earlier commit d83110b. |
lukemelia
force-pushed
the
cs-11327-selection-trigger-sizing
branch
from
7f18293 to
1a28f7d
Compare
lukemelia
force-pushed
the
cs-11328-primary-button-focus-ring
branch
2 times, most recently
from
eb313f7 to
d83110b
Compare
CS-11328. The highlight (primary) selection-menu trigger drew its focus ring in --boxel-highlight — the same color as its fill — so it was invisible. (And boxel-ui's unlayered global `button:focus` rule overrides BoxelButton's own layered focus styles, so a fix on the button component wouldn't take.) Set the ring at the component level: a lighter-but-saturated tint of the current fill (color-mix 70% fill / 30% white), sitting snug 1px outside — matching Burcu's mockup. It stays visible against the highlight and tracks the fill as it darkens when the menu opens. Verified live in the CardHeader and chooser. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
lukemelia
force-pushed
the
cs-11328-primary-button-focus-ring
branch
from
d83110b to
1a4bd34
Compare
jurgenwerk
approved these changes
Jun 5, 2026
burieberry
approved these changes
Jun 5, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
CS-11328. The primary button's
:focus-visibleset onlyoutline-color, relying on the UA defaultoutline-style. Set the full outline shorthand (2px solid via--boxel-outline-*) so the ring renders reliably, 2px outside the button, and darken it to--boxel-highlight-hoverwhen the fill darkens on hover/active. Theselection-menu's now-redundant local focus-ring override is removed (the base button covers it); its open-state ring-darken is kept.Note: the
:focus-visiblechange is on the sharedBoxelButton, so every button's keyboard focus ring is now explicitly2px solidrather than the browser default — intended (the design-system--boxel-outline).Third of three PRs split out of #5105. Stacked on CS-11327 (which is on CS-11326) — merge those first.
🤖 Generated with Claude Code