Use variables for list-group-item color levels (#30009)

Co-authored-by: Martijn Cuppens <martijn.cuppens@gmail.com>

diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index a7fa9f70257dc9a4283a69eaf67f319d8704591d..99ec43be820e0aa8af732ac8ad061e8a90e49cf4 100644 (file)
--- a/scss/_list-group.scss
+++ b/scss/_list-group.scss
@@ -157,5 +157,5 @@
 // Organizationally, this must come after the `:hover` states.
 
 @each $color, $value in $theme-colors {
-  @include list-group-item-variant($color, color-level($value, -9), color-level($value, 6));
+  @include list-group-item-variant($color, color-level($value, $list-group-item-bg-level), color-level($value, $list-group-item-color-level));
 }

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 31ca7f71aa65d7153493eeb9d7da04f7fe5ebd84..9312c0be405025380f2a036344765b08cd45ccc9 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1105,6 +1105,8 @@ $list-group-border-radius:          $border-radius !default;
 
 $list-group-item-padding-y:         .75rem !default;
 $list-group-item-padding-x:         1.25rem !default;
+$list-group-item-bg-level:          -9 !default;
+$list-group-item-color-level:       6 !default;
 
 $list-group-hover-bg:               $gray-100 !default;
 $list-group-active-color:           $component-active-color !default;