Improve gradients

- Use a semitransparent gradient from light to dark which works on any background-color
- Store the gradient as a custom property (--bs-gradient)
- Remove `.bg-gradient-*` variants in favour of `.bg-gradient` which works even when `$enable-gradients` are enabled
- Add gradients to navbar, active page links and badges when gradients are enabled

diff --git a/scss/_badge.scss b/scss/_badge.scss
index baa80a75f32ec6e47b0ceeb16a1309e33cc871df..08df1b84a7e625d4f0995d111ff179da692df20a 100644 (file)
--- a/scss/_badge.scss
+++ b/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 {

diff --git a/scss/_helpers.scss b/scss/_helpers.scss
index 06d931449fc6fa94d713446223d5708a3f10a6f0..1fdbc2959d161a3d9a7535bbf48934c6f7f85349 100644 (file)
--- a/scss/_helpers.scss
+++ b/scss/_helpers.scss
@@ -1,4 +1,3 @@
-@import "helpers/background";
 @import "helpers/clearfix";
 @import "helpers/colored-links";
 @import "helpers/embed";

diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index b48761de9ec9ebc3e16bd60131e8e892d62eb8cf..8c00f31d25286db49142af9d717b727f0045d1b7 100644 (file)
--- a/scss/_mixins.scss
+++ b/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";

diff --git a/scss/_nav.scss b/scss/_nav.scss
index e71f6839e22ea670a1db5a3df76170a5cf0a888f..60ad27a55331c29de8a15fb46a66661c8dfda9e8 100644 (file)
--- a/scss/_nav.scss
+++ b/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);
   }
 }
 

diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 129351d19302426732dac1477efb08146dcc42fb..35d7c7b72eff0334bda0eedb7288f60bb95ed47e 100644 (file)
--- a/scss/_navbar.scss
+++ b/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.

diff --git a/scss/_pagination.scss b/scss/_pagination.scss
index 3ef747d31183ee5954f3f9cf31664c7e943d0a66..40b100b1897f232c597d2d62ac7ea2f66869a7f8 100644 (file)
--- a/scss/_pagination.scss
+++ b/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;
   }
 

diff --git a/scss/_root.scss b/scss/_root.scss
index 86f7493c2ad1fc29b17634bbc6b1ce5b4e38b551..44eff1700687044663912cee17c6ad564a801603 100644 (file)
--- a/scss/_root.scss
+++ b/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};
 }

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index 2d886bc4fe5227e9c987168df9c6642a75067b9a..aa6c6eade68a24c0fee944a489d331ee3051bfa4 100644 (file)
--- a/scss/_utilities.scss
+++ b/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,

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 6bbcc066bbfa99d0930b0a1956e50bd7cd01a916..eeece96c024113b629fb8af7d95059def7b6c822 100644 (file)
--- a/scss/_variables.scss
+++ b/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
 //

diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
index 31f554a41cbb86df167b222d69171cd9f15839d3..7f4f3cb0fa1eab241ad854535dec37f9690048bb 100644 (file)
--- a/scss/forms/_form-check.scss
+++ b/scss/forms/_form-check.scss
@@ -53,7 +53,7 @@
 
     &[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);
       }
@@ -61,7 +61,7 @@
 
     &[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);
     }

diff --git a/scss/helpers/_background.scss b/scss/helpers/_background.scss
deleted file mode 100644 (file)
index 1c0a32a..0000000
--- a/scss/helpers/_background.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@if $enable-gradients {
-  @each $color, $value in $theme-colors {
-    @include bg-gradient-variant(".bg-gradient-#{$color}", $value);
-  }
-}

diff --git a/scss/mixins/_background-variant.scss b/scss/mixins/_background-variant.scss
deleted file mode 100644 (file)
index 8a5bca4..0000000
--- a/scss/mixins/_background-variant.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-// stylelint-disable declaration-no-important
-
-@mixin bg-gradient-variant($parent, $color) {
-  #{$parent} {
-    background-image: linear-gradient(180deg, mix($body-bg, $color, 15%), $color) !important;
-  }
-}

diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 5166583714da0cc5d62754643cad74549c1b186e..99ca559846aad84d2363833a63247958ad787dea 100644 (file)
--- a/scss/mixins/_forms.scss
+++ b/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 {

diff --git a/scss/mixins/_gradients.scss b/scss/mixins/_gradients.scss
index cecabc9139ce28be7b58e3eb64d1ec4b4ba1dadd..8b87c0f15e2b99860380bbb4a003fa8812805ec3 100644 (file)
--- a/scss/mixins/_gradients.scss
+++ b/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);
   }
 }
 

diff --git a/site/content/docs/5.0/migration.md b/site/content/docs/5.0/migration.md
index bbaf43d8d3e21ca34753ab221a354628541f4006..a0fd30a469171fb0330c6989cad48b45fc11071a 100644 (file)
--- a/site/content/docs/5.0/migration.md
+++ b/site/content/docs/5.0/migration.md
@@ -46,6 +46,8 @@ Changes to our source Sass files and compiled CSS.
 - `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`.
+- Linear gradients are simplified when gradients are enabled and therefore, `gradient-bg()` now only accepts an optional `$color` parameter.
+- `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
 

diff --git a/site/content/docs/5.0/utilities/colors.md b/site/content/docs/5.0/utilities/colors.md
index cef79ab6623fa1ac3a906614030e6c5809d3edbc..86f4741466725e275318e7a05e75429422a6af60 100644 (file)
--- a/site/content/docs/5.0/utilities/colors.md
+++ b/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 >}}