fix(theme): solid primary buttons follow the skin, like outline ones already did - #193
Merged
Merged
Conversation
…already did A card showing a `btn-primary` next to a `btn-outline-primary` drew one Bootstrap blue and one skin orange under Bengal. Bootstrap 5.3 bakes the stock blue (#0d6efd) into BOTH variants' component vars, so a skin that swaps --bs-primary restyles neither. default.css already rebound .btn-outline-primary to var(--bs-primary) — with a comment explaining exactly this trap — but .btn-primary was never given the same treatment, so the outline tracked the skin and the solid did not. Any pairing of the two disagreed, in every skin except cheetah (which hardcodes its own solid rule and so looked fine, hiding the bug). Both variants are now bound to the token, so bengal orange, jaguar navy and tabby orange all render a matching pair. Hover/active darken via color-mix, each preceded by a plain var() fallback: a browser without color-mix drops the unsupported declaration and keeps the earlier one, so the button degrades to a flat skin-colored hover rather than to blue. Also reunites the explanatory comment with the rules it documents — a later .cell-emphasis addition had been inserted between them, leaving the comment sitting above the wrong block. cheetah.css keeps its bespoke solid override: it is now redundant (same teal, hand-tuned shades) but it is precisely the per-skin escape hatch the comment sanctions, and its shades are better than a generic mix. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01WXgMENcwa4Q8yCJaHpjHpf
Merged
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.
The bug
A card showing a
btn-primarynext to abtn-outline-primarydrew one Bootstrap blue and one skin orange under Bengal.Bootstrap 5.3 bakes the stock blue
#0d6efdinto both variants' component vars, so a skin that swaps--bs-primaryrestyles neither.default.cssalready rebound.btn-outline-primarytovar(--bs-primary)— with a comment explaining exactly this trap — but.btn-primarywas never given the same treatment.So the outline tracked the skin and the solid didn't, and any pairing of the two disagreed:
--bs-primary#c65312#2c3e50#e95420#3459e6#0d9488Two skins accidentally looked correct, which is why it survived.
The fix
Both variants bound to the token, so every skin renders a matching pair.
Hover/active darken via
color-mix, each preceded by a plainvar()fallback — a browser withoutcolor-mixdrops the unsupported declaration and keeps the earlier one, so the button degrades to a flat skin-colored hover rather than back to blue.Also reunites the explanatory comment with the rules it documents: a later
.cell-emphasisaddition had been inserted between them, leaving the comment sitting above the wrong block.cheetah.csskeeps its bespoke solid override. It's redundant now (same teal, hand-tuned shades) but it is exactly the per-skin escape hatch the comment sanctions, and its shades beat a generic mix.