As a special add-on to Beta 2, I've taken a swing at properly addressing gradients and shadows for folks. This PR is a huge update to how we utilize shadows and gradients across Bootstrap (when they're enabled, at least). Let's start with what issues this addresses:
- Fixes #24389 (closed): Always forces a focus state
box-shadowon inputs and buttons, regardless of$enable-shadows, to ensure proper accessibility. - Fixes #24242 (closed): Adds variables for the shadow width and color.
- Closes #23837 (closed): Improves shadow styles for inputs and buttons, though this isn't always 100% given some shadows are designed to work with gradients.
- Fixes #21367 (closed): Finally adds gradients to buttons, woohoo!
Now, here's what's changed to address those issues.
For shadows
- Replaced
$btn-focus-box-shadowand$input-focus-box-shadowwith a new unified variable to match our$input-btn-approach:$input-btn-focus-box-shadow. - Added two new variables to control the size of the focus shadow and the color:
$input-btn-focus-widthand$input-btn-focus-color. - Changed the focus shadow's width from
3pxto.2rem. - For accessibility and consistency with validation styles, updated the
form-control-focus()mixin to use a manual$enable-shadowscheck so we can still provide a focus state style despite the global shadow override. - Updated the
button-variant()andbutton-outline-variant()mixins to use the new$input-btn-focus-widthvariable, replacing static3pxvalues throughout.
For gradients
- Added new
gradient-bg()mixin for specifying an opt-in gradient with abackground-colorfallback. - Added opt-in gradients to alerts, buttons, carousel controls, custom checks and file inputs, and dropdown items.
- Added new
.bg-gradient-utilities when$enable-gradientsis set totrue(set tofalseby default).