Improve gradients and add .bg-gradient helper class

scss/_badge.scss

@@ -14,6 +14,7 @@
   white-space: nowrap;
   vertical-align: baseline;
   @include border-radius($badge-border-radius);
+  @include gradient-bg();
 
   // Empty badges collapse automatically
   &:empty {

scss/_helpers.scss

@@ -1,4 +1,3 @@
-@import "helpers/background";
 @import "helpers/clearfix";
 @import "helpers/colored-links";
 @import "helpers/embed";

scss/_mixins.scss

@@ -30,7 +30,6 @@
 @import "mixins/table-variants";
 
 // Skins
-@import "mixins/background-variant";
 @import "mixins/border-radius";
 @import "mixins/box-shadow";
 @import "mixins/gradients";

scss/_nav.scss

@@ -82,7 +82,7 @@
   .nav-link.active,
   .show > .nav-link {
     color: $nav-pills-link-active-color;
-    background-color: $nav-pills-link-active-bg;
+    @include gradient-bg($nav-pills-link-active-bg);
   }
 }
 

scss/_navbar.scss

@@ -24,6 +24,7 @@
   padding-right: $navbar-padding-x; // default: null
   padding-bottom: $navbar-padding-y;
   padding-left: $navbar-padding-x; // default: null
+  @include gradient-bg();
 
   // Because flex properties aren't inherited, we need to redeclare these first
   // few properties so that content nested within behave properly.

scss/_pagination.scss

@@ -34,7 +34,7 @@
   &.active .page-link {
     z-index: 3;
     color: $pagination-active-color;
-    background-color: $pagination-active-bg;
+    @include gradient-bg($pagination-active-bg);
     border-color: $pagination-active-border-color;
   }
 

scss/_root.scss

@@ -12,4 +12,5 @@
   // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
   --bs-font-sans-serif: #{inspect($font-family-sans-serif)};
   --bs-font-monospace: #{inspect($font-family-monospace)};
+  --bs-gradient: #{$gradient};
 }

scss/_utilities.scss

@@ -416,6 +416,11 @@ $utilities: map-merge(
         )
       )
     ),
+    "gradient": (
+      property: background-image,
+      class: bg,
+      values: (gradient: var(--bs-gradient))
+    ),
     "white-space": (
       property: white-space,
       class: text,

scss/_variables.scss

@@ -222,6 +222,11 @@ $enable-negative-margins:     false !default;
 $enable-deprecation-messages: true !default;
 $enable-important-utilities:  true !default;
 
+// Gradient
+//
+// The gradient which is added to components if `$enable-gradients` is `true`
+// This gradient is also added to elements with `.bg-gradient`
+$gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)) !default;
 
 // Spacing
 //

scss/forms/_form-check.scss

@@ -53,15 +53,15 @@
 
     &[type="checkbox"] {
       @if $enable-gradients {
-        background-image: escape-svg($form-check-input-checked-bg-image), linear-gradient(180deg, lighten($form-check-input-checked-bg-color, 10%), $form-check-input-checked-bg-color);
+        background-image: escape-svg($form-check-input-checked-bg-image), var(--bs-gradient);
       } @else {
         background-image: escape-svg($form-check-input-checked-bg-image);
       }
     }
 
     &[type="radio"] {
       @if $enable-gradients {
-        background-image: escape-svg($form-check-radio-checked-bg-image), linear-gradient(180deg, lighten($form-check-input-checked-bg-color, 10%), $form-check-input-checked-bg-color);
+        background-image: escape-svg($form-check-radio-checked-bg-image), var(--bs-gradient);
       } @else {
         background-image: escape-svg($form-check-radio-checked-bg-image);
       }
@@ -73,7 +73,7 @@
     border-color: $form-check-input-indeterminate-border-color;
 
     @if $enable-gradients {
-      background-image: escape-svg($form-check-input-indeterminate-bg-image), linear-gradient(180deg, lighten($form-check-input-checked-bg-color, 10%), $form-check-input-checked-bg-color);
+      background-image: escape-svg($form-check-input-indeterminate-bg-image), var(--bs-gradient);
     } @else {
       background-image: escape-svg($form-check-input-indeterminate-bg-image);
     }

scss/mixins/_forms.scss

@@ -97,7 +97,7 @@
       border-color: $color;
 
       &:checked {
-        @include gradient-bg(lighten($color, 10%), escape-svg($form-check-input-checked-bg-image));
+        background-color: $color;
       }
 
       &:focus {

scss/mixins/_gradients.scss

@@ -1,14 +1,10 @@
 // Gradients
 
-@mixin gradient-bg($color, $foreground: null) {
+@mixin gradient-bg($color: null) {
+  background-color: $color;
+
   @if $enable-gradients {
-    @if $foreground {
-      background-image: $foreground, linear-gradient(180deg, mix($body-bg, $color, 15%), $color);
-    } @else {
-      background-image: linear-gradient(180deg, mix($body-bg, $color, 15%), $color);
-    }
-  } @else {
-    background-color: $color;
+    background-image: var(--bs-gradient);
   }
 }
 

site/content/docs/5.0/migration.md

@@ -44,8 +44,10 @@ Changes to our source Sass files and compiled CSS.
 - The `button-outline-variant()` mixin now accepts an additional argument, `$active-color`, for setting the button's active state text color. By default, this parameter will find which color provides more contrast against the button's active background color with `color-contrast()`.
 - Ditch the Sass map merges, which makes it easier to remove redundant values. Keep in mind you now have to define all values in the Sass maps like `$theme-colors`. Check out how to deal with [Sass maps]({{< docsref "/customize/sass#maps-and-loops" >}}).
 - `color-yiq()` function and related variables are renamed to `color-contrast()` since it's not related to YIQ colorspace anymore. [See #30168.](https://github.com/twbs/bootstrap/pull/30168/)
-  - `$yiq-contrasted-threshold` is renamed `$min-contrast-ratio`.
-  - `$yiq-text-dark` and `$yiq-text-light` are respectively renamed `$color-contrast-dark` and `$color-contrast-light`.
+  - `$yiq-contrasted-threshold` is renamed to `$min-contrast-ratio`.
+  - `$yiq-text-dark` and `$yiq-text-light` are respectively renamed to `$color-contrast-dark` and `$color-contrast-light`.
+- Linear gradients are simplified when gradients are enabled and therefore, `gradient-bg()` now only accepts an optional `$color` parameter.
+- The `bg-gradient-variant()` mixin is removed since the `.bg-gradient` class can now be used to add gradients to elements instead of the `.bg-gradient-*` classes.
 
 ## JavaScript
 
@@ -66,14 +68,14 @@ We've updated the color system that powers Bootstrap to improve color contrast a
 
 Changes to any layout tools and our grid system.
 
-- Dropped `.media` component as it can be built with utility classes. [See #28265](https://github.com/twbs/bootstrap/pull/28265).
+- Dropped the `.media` component as it can be built with utility classes. [See #28265](https://github.com/twbs/bootstrap/pull/28265).
 - Remove `position: relative` from grid columns.
 - The horizontal padding is added to the direct children in a row instead of the columns themselves.
   - This simplifies our codebase.
   - The column classes can now be used stand alone. Whenever they are used outside a `.row`, horizontal padding won't be added.
-- Responsive gutter classes can be used to control the gutter width in as well horizontal, vertical or both directions.
+- The responsive gutter classes can be used to control the gutter width in horizontal, vertical or both directions.
 - The gutter width is now set in `rem` and decreased from `30px` to `1.5rem` (24px).
-- `bootstrap-grid.css` now only applies `box-sizing: border-box` to the column instead of resetting the global box-sizing. This way the grid system can be used, even if `box-sizing: border-box` in not applied to each element.
+- `bootstrap-grid.css` now only applies `box-sizing: border-box` to the column instead of resetting the global box-sizing. This way the grid system can be used, even if `box-sizing: border-box` is not applied to each element.
 
 ## Content, Reboot, etc
 
@@ -101,7 +103,7 @@ Changes to Reboot, typography, tables, and more.
 
 - Rearranged form documentation under its own top-level section.
   - Split out old Forms page into several subpages
-  - Moved input groups docs under new Forms section
+  - Moved input groups docs under the new Forms section
 - Rearranged source Sass files under `scss/forms/`, including moving over input group styles.
 - Combined native and custom checkboxes and radios into single `.form-check` class.
   - New checks support sizing via `em`/`font-size` or explicit modifier classes now.
@@ -111,7 +113,7 @@ Changes to Reboot, typography, tables, and more.
 - Combined native and custom selects into `.form-select`.
   - Dropped `.custom-select` and associated classes.
   - Renamed most `$custom-select` variables to `$form-select` ones.
-- Updated file input component with same overall design, but improved HTML.
+- Updated file input component with the same overall design, but improved HTML.
   - Refactored `.form-file` markup to resolve some visual bugs while allowing translation and button text changes via HTML instead of CSS.
   - Dropped native `.form-control-file` and `.form-control-range` components entirely.
   - Renamed `.custom-file` to `.form-file` (including variables).
@@ -147,7 +149,7 @@ Badges were overhauled to better differentiate themselves from buttons and to be
 ### Cards
 
 - Removed the card columns in favor of a Masonry grid [See #28922](https://github.com/twbs/bootstrap/pull/28922).
-- Removed card decks in favor of the grid which adds more flexibility over responsive behaviour.
+- Removed card decks in favor of the grid which adds more flexibility over responsive behavior.
 
 ### Jumbotron
 

site/content/docs/5.0/utilities/colors.md

@@ -39,12 +39,14 @@ Similar to the contextual text color classes, easily set the background of an el
 
 ## Background gradient
 
-When `$enable-gradients` is set to `true` (default is `false`), you can use `.bg-gradient-` utility classes. [Learn about our Sass options]({{< docsref "/customize/sass" >}}) to enable these classes and more.
+By adding a `.bg-gradient` class, a linear gradient is added as background image to the backgrounds. This gradient starts with a semi-transparent white which fades out to the bottom.
+
+Do you need a gradient in your custom CSS? Just add `background-image: var(--bs-gradient);`.
 
 {{< markdown >}}
 {{< colors.inline >}}
 {{- range (index $.Site.Data "theme-colors") }}
-- `.bg-gradient-{{ .name }}`
+<div class="p-3 mb-2 bg-{{ .name }} bg-gradient {{ if or (eq .name "light") (eq .name "warning") }}text-dark{{ else }}text-white{{ end }}">.bg-{{ .name }}.bg-gradient</div>
 {{- end -}}
 {{< /colors.inline >}}
 {{< /markdown >}}