-
-
Notifications
You must be signed in to change notification settings - Fork 78.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Convert buttons to CSS variables #34600
Conversation
34d2052
to
03a8e7f
Compare
ae6ad05
to
8dbe58a
Compare
Per #34435, we may want to migrate this back to v4 with a separate PR to fix in Sass. |
This comment has been minimized.
This comment has been minimized.
3967923
to
1f31212
Compare
65327f0
to
c8733b6
Compare
Outline button has no disabled border color variable. |
a51a830
to
81ae9bb
Compare
This PR should be in even better shape than before. I've just pushed a few more changes to migrate all of Bootstrap's docs buttons to CSS variables, renamed and cleaned up a few things, and added an example of our custom buttons via CSS variables to the buttons docs page. Let me know how you're feeling about this all @ffoodd, would love your eyes on it :). |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
A few questions around the PR— it looks fine already 👌
Very nice work, I really like the naming move to accent
in the docs ❤️
- Use CSS variables wherever possible - Rename purple-bright to violet for brevity, add CSS vars versions - Rename download to accent
Todos:
gradient()
mixins. Nothing to figure out, we're good to go!border-radius
property vs@include border-radius()
. Dropped the mixin here and am using a fallback value in the CSS variable given thevalid-radius()
function.font-size()
mixin from thebutton-size()
mixin and default.btn
value. It doesn't seem to matter comparing this PR to main..btn-link
Biggest concern for all these PRs will be compiled file size of our CSS. Looking at the bootstrap.css diff though:
This will change a bit once:focus
styles are restored.Preview: https://deploy-preview-34600--twbs-bootstrap.netlify.app/docs/5.1/components/buttons/