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-shadow
on 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-shadow
and$input-focus-box-shadow
with 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-width
and$input-btn-focus-color
. - Changed the focus shadow's width from
3px
to.2rem
. - For accessibility and consistency with validation styles, updated the
form-control-focus()
mixin to use a manual$enable-shadows
check 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-width
variable, replacing static3px
values throughout.
For gradients
- Added new
gradient-bg()
mixin for specifying an opt-in gradient with abackground-color
fallback. - Added opt-in gradients to alerts, buttons, carousel controls, custom checks and file inputs, and dropdown items.
- Added new
.bg-gradient-
utilities when$enable-gradients
is set totrue
(set tofalse
by default).