* use `background-color` instead of the shorthand
* use `outline: 0` consistently
* fix transform order
* remove quotes from `SFMono-Regular`

* Update the form focus mixin to use a manual `$enable-shadows` check so we can always ensure a focus state for accessibility and consistency

* - Add new `$input-btn-focus-width` and `$input-btn-focus-color` variables.

- Replace separate `$btn-focus-box-shadow` and `$input-focus-box-shadow`
variables with unified `$input-btn-focus-box-shadow` to match our
combined variables approach elsewhere.

* Put new focus width var to use in buttons mixins

* use new button input-box shadow var

* Add a new mixin for quickly adding linear gradient to components when $enable-gradients is set to true

* use correct var

* fix focus shadows in button mixins

* Add opt-in gradients to alerts, buttons, carousel, custom radios and checkboxes, custom file input, and dropdown items

* Generate .bg-gradient- utilities

* add headings to colors page and document bg-gradient utils

* update the button color for active status, check with yiq as it's done for basic state and hover state

Turns out #22612 is a bad idea and it makes all sorts of weird visual
glitches when working with form controls and transparent borders.

Custom File `$custom-file-focus-box-shadow` should show even if box shadows are disabled

Custom File variables should inherit from inputs

c3e4cbdf changed the border of input elements to be translucent. This commit makes
input group elements and custom form inputs follow the same pattern.

(#22414) Rename for consistency `$custom-checkbox-border-radius`, `$custom-checkbox-icon-checked`, `$custom-checkbox-indeterminate-bg`, `$custom-checkbox-icon-indeterminate`, `$custom-checkbox-indeterminate-box-shadow`, `$custom-radio-border-radius`, `$custom-radio-icon-checked` to `$custom-checkbox-indicator-border-radius`, `$custom-checkbox-indicator-icon-checked`, `$custom-checkbox-indicator-indeterminate-bg`, `$custom-checkbox-indicator-icon-indeterminate`, `$custom-checkbox-indicator-indeterminate-box-shadow`, `$custom-radio-indicator-border-radius`, `$custom-radio-indicator-icon-checked`, respectively

(Fixes #22414) Rename for consistency `$custom-checkbox-radius`, `$custom-checkbox-checked-icon`, `$custom-checkbox-indeterminate-indicator-color`, `$custom-checkbox-indeterminate-icon`, `$custom-radio-radius`, `$custom-radio-checked-icon`, `$custom-select-sm-font-size`, to `$custom-checkbox-border-radius`, `$custom-checkbox-icon-checked`, `$custom-checkbox-indicator-indeterminate-color`, `$custom-checkbox-icon-indeterminate`, `$custom-radio-border-radius`, `$custom-radio-icon-checked`, `$custom-select-font-size-sm` respectively

(#22414) Rename for consistency `$custom-control-disabled-indicator-bg`, `$custom-control-disabled-description-color`, `$custom-control-checked-indicator-color`, `$custom-control-checked-indicator-bg`, `$custom-control-checked-indicator-box-shadow`, `$custom-control-focus-indicator-box-shadow`, `$custom-control-active-indicator-color`, `$custom-control-active-indicator-bg`, `$custom-control-active-indicator-box-shadow` to `$custom-control-indicator-disabled-bg`, `$custom-control-description-disabled-color`, `$custom-control-indicator-checked-color`, `$custom-control-indicator-checked-bg`, `$custom-control-indicator-checked-box-shadow`, `$custom-control-indicator-focus-box-shadow`, `$custom-control-indicator-active-color`, `$custom-control-indicator-active-bg`, `$custom-control-indicator-active-box-shadow`, respectively

— Sizing shorthand comes last
— Add height var and put it to use

— Previously we weren't including the border-width on the computed height, leading to alignment issues.

— New system utilizes three variables (not ideal, but straightforward) for computing these heights. One for the vertical border, one for the line-height/font-size/padding dance, and one to add those together.

— Updates CSS across forms and custom forms to use new sizing. Special note here: form validation icon sizing uses the inner variables because background-image doesn't bleed into borders unless explicit background-clip.

<label class="custom-file"><input type="file" class="custom-file-input" /><span class="custom-file-control"></span></label>
VS
<label class="custom-file"><input type="file" class="custom-file-input" /><span class="custom-file-control">test.txt</span></label>

* Fixed some linting issues

* Run npm tasks after scss cleanup

* Revert "Run npm tasks after scss cleanup"

This reverts commit 1103a0da.

* Property sort order for grid

* Let's respest the property order in the mixins

* Respect property sort order in reboot file

* ::-ms-expand is a vendor-prefix, add it to the scss-lint disable

* Revert hover mixin comment

* Fixed missing mixin hover-focus

In addition to #22011 and #21994

* Remove most of custom cursor: pointer; implementations

* turns out that's not so much of a thing

Not needed (and all other old IE filter attributes have been removed from the CSS. This was the only one remaining

Custom Forms: Allow Chrome/Firefox feature that lets the user drag and drop into file inputs (#20033)

* Restored functionality of dragging files into .custom-file inputs.

* Replaced padding with height on .custom-file-input

This also fixes #21280. Previously, we were using float and clear on the individual controls, but that meant a computer height of `0` for the parent `.custom-controls-stacked`. No more problem after using flexbox though.

Turns out we did have the correct height calculation with our custom selects. The problem was we lacked a shared line-height with our buttons and inputs.

This restores the previous `calc` math and adds a line-height that reuses the input line-height.

Move margin from adjacent selector to right on the .custom-control for better responsive rendering (#21295)

Fixes #21023.

Uses some math functions to determine what the offset should be. This is helpful for those who customize the size of their indicators and still want them vertically centered.

Fixes #20730.

This change computes the minimum needed height of what a single line of text would be for the custom checkboxes/radios. This is required because our custom control indicators are positioned absolutely, meaning they cannot be clearfixed or anything like that. Using a computed value means it should scale nicely in case of customization

Matches the changes from #20874 to the regular select element. This is really only necessary for IE and Edge near as I can tell. Fixes #20810.

* Allow text of custom form labels to wrap like the default ones
* Switch from using after to force line breaks to float/clear combo in stacked custom forms

Closes #18887