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

3 files changed, 5 insertions, 16 deletions

diff --git a/scss/mixins/_background-variant.scss b/scss/mixins/_background-variant.scss
deleted file mode 100644
index 8a5bca4a90..0000000000
--- 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 5166583714..99ca559846 100644
--- 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 cecabc9139..8b87c0f15e 100644
--- 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);
   }
 }