fix(kit): draw AuthFrame's band marks from the band's own pair - #63
Merged
Conversation
The bullet marks beside the pitch were `bg-accent`, drawn on the band. The accent is chosen to sit on a surface, so on the band it is whatever it happens to be. Against the palette this repo ships it is already 2.69:1 in light and 1.97:1 in dark, and a kit that picks a deeper accent loses the marks entirely. They are aria-hidden, so nothing ever failed a check on them; they were just close to invisible, in one theme at a time. `bg-on-band` is the pair the kit keeps for this. It measures 5.75:1 and 4.21:1 against the same two bands and follows the band wherever a kit takes it, including the styles where the band is a window onto the backdrop rather than a panel of colour. Only `Screen` and `AuthFrame` render inside `band-fill`. What `Screen` puts there already takes `onBand` and reads from the band pair, and `StatRow`'s lead panel carries its own fill and ink together, so nothing else needed changing.
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
1 participant
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.
Closes #59.
The fix
AuthFrame's bullet marks werebg-accent, drawn on the band. They are nowbg-on-band, the pair the kit keeps for anything sitting on the band, and they carry a comment saying so.It is not only deep accents
The issue measured a deep amber in
seamless-idea-web. Against the palette this repo ships, with its sky blue accent on a blue band, the marks were already:on-bandon band#2169a8#287fcbSo the default kit had the bug too. The marks are
aria-hidden, so no accessibility check ever failed on them, which is why it survived: nothing was going to report it, and whoever was looking was in one theme at a time.on-bandalso holds up where the band is a window onto the backdrop rather than a panel of colour, because that pair falls back to the brand. That is the reasoningPrimaryButton'sonBandvariant already carries.The sweep
The issue asked for a look at everything else rendering inside
band-fill. OnlyScreenandAuthFramedo. EverythingScreenputs on the band,PageHeaderandStatRow, already takesonBandand reads from the band pair, andStatRow's lead panel brings its own fill and ink together so it is self-consistent wherever it lands. Nothing else needed changing.Checks
npm run validatepasses, andnpm run checkis green in both templates (react-vite18 tests,react-oauth22 tests). No test here: the change is a Tailwind class on a decorative element, and a test asserting the class string would be a copy of the source rather than a check on it.