Disabling box shadows on buttons still renders box-shadows

[wvandenhaak]

I found the following issue while customizing Bootstrap (version 4.5.3)

When disabling shadows using the following settings, buttons still have a box shadow:
$enable-shadows: false;
$btn-focus-box-shadow: none;
$btn-active-box-shadow: none;

The button mixin has the following code (lines 23-28, 54-59 and 93-98):

@if $enable-shadows {
  @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5));
} @else {
  // Avoid using mixin so we can pass custom focus shadow properly
  box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
}

As shown in the else-statement a box shadow is still generated.

Suggested change:
Move the box shadow settings to the _variables.scss file and apply the variables in the mixin.
The forms mixins already has this setup, see example below.

Example from the forms mixin (line 19-24)

@if $enable-shadows {
  @include box-shadow($input-box-shadow, $input-focus-box-shadow);
} @else {
  // Avoid using mixin so we can pass custom focus shadow properly
  box-shadow: $input-focus-box-shadow;
}

[mdo]

We don't use the $input-focus-box-shadow variable there as buttons and inputs get colored focus states with their validation states and modifier classes (e.g., :invalid and .btn-danger). We always want there to be a focus state, which is why we've coded it the way we have.

[wvandenhaak]

So the only way to disable the box shadows on buttons when they get :focus (for example) is to override them in custom CSS or set $btn-focus-width to 0?

With the following settings:

$enable-shadows: false;

$input-box-shadow: none;
$input-btn-focus-box-shadow: none;

$btn-box-shadow: none;
$btn-active-box-shadow: none;
$btn-focus-box-shadow: none;

Inputs don't have box-shadows when focussed but buttons do (input on top, button below, both in focus state, primary color pink):

[rexwebmedia]

Just use simple class (.shadow-none), like this

<button class="btn btn-dark shadow-none fw-bold>Click Here</button>

[wvandenhaak]

Just use simple class (.shadow-none), like this

<button class="btn btn-dark shadow-none fw-bold>Click Here</button>

I was hoping Bootstraps was able to disable box-shadow on buttons when customizing in sass.
Adding this class is a fine workaround.