diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index a7fa9f7025..99ec43be82 100644
--- 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 31ca7f71aa..9312c0be40 100644
--- 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;