v5: Improve customization by allowing manually setting calculated variables in styles

Created by: ydmitry

Hello!

We can have cases when we need to change specific style property, but we can't do this because this property value set up in Bootstrap library as calculated formula. The idea is to create separate variables for these cases and precalculate it in default values of these variables.

The same was done in this issue and PR, but only for button component: https://github.com/twbs/bootstrap/issues/28899 https://github.com/twbs/bootstrap/pull/29444

The idea is to follow this practice in all components.

Example

Before:

@mixin list-group-item-variant($state, $background, $color) {
  .list-group-item-#{$state} {
    // ...
    background-color: darken($background, 5%);
    // ...
  }
}

After:

@mixin list-group-item-variant($state, $background, $color, $background-hover: darken($background, 5%)) {
  .list-group-item-#{$state} {
    // ...
    background-color: $background-hover;
    // ...
  }
}

The same can be done not only for colors, but for calculated unit values:

Before:

.card-subtitle {
  margin-top: -$card-spacer-y / 2;
}

After:

// In variables:
$card-subtitle-spacer: -$card-spacer-y / 2 !default;

// In styles:
.card-subtitle {
  margin-top: $card-subtitle-spacer;
}

Benefits

• Allows to customize more properties and if you don't need - just keep default calculation of the value
• Allows to transform it to CSS variable usage by setting e.g. $background-hover: var(--bs-background-hover); (if we have background-color: darken($background, 5%); we can't do this)

Drawbacks

• More variables to support
• Longer migration guide (probably)

What do you thik about this? Should I do a PR?