Skip to content
GitLab

Convert buttons to CSS variables

Merged Mark Otto requested to merge css-vars-btn into main

Todos:

  • Replace focus styles with rgb color CSS vars (needs #34100 merged first)
  • Replace or update gradient() mixins. Nothing to figure out, we're good to go!
  • Figure out border-radius property vs @include border-radius(). Dropped the mixin here and am using a fallback value in the CSS variable given the valid-radius() function.
  • Figure out RFS sizing in CSS vars (maybe relevant: https://github.com/twbs/rfs/issues/311). I've removed the font-size() mixin from the button-size() mixin and default .btn value. It doesn't seem to matter comparing this PR to main.
  • Replace or update outline variant mixin and styles.
  • Fix .btn-link
  • Tighten bundlewatch before the final merge

Biggest concern for all these PRs will be compiled file size of our CSS. Looking at the bootstrap.css diff though:

319 insertions(+), 485 deletions(-)

This will change a bit once :focus styles are restored.

Preview: https://deploy-preview-34600--twbs-bootstrap.netlify.app/docs/5.1/components/buttons/