Fix: variables collide with globals (#32492)

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

diff --git a/scss/_alert.scss b/scss/_alert.scss
index 3d9b69bcd3b7cc1ac459f48d03266602ba1d2a2e..34f1e84edf2aad9df97936539fd3882290ca376f 100644 (file)
--- a/scss/_alert.scss
+++ b/scss/_alert.scss
@@ -44,14 +44,14 @@
 // Generate contextual modifier classes for colorizing the alert.
 
 @each $state, $value in $theme-colors {
-  $background: shift-color($value, $alert-bg-scale);
-  $border: shift-color($value, $alert-border-scale);
-  $color: shift-color($value, $alert-color-scale);
-  @if (contrast-ratio($background, $color) < $min-contrast-ratio) {
-    $color: mix($value, color-contrast($background), abs($alert-color-scale));
+  $alert-background: shift-color($value, $alert-bg-scale);
+  $alert-border: shift-color($value, $alert-border-scale);
+  $alert-color: shift-color($value, $alert-color-scale);
+  @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
+    $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
   }
   .alert-#{$state} {
-    @include alert-variant($background, $border, $color);
+    @include alert-variant($alert-background, $alert-border, $alert-color);
   }
 }
 // scss-docs-end alert-modifiers

diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index a95adc181c9520b2aa562ac820165e797a2d9b2a..7e23b8e0c059d41b1a313520967b7cb99c84f184 100644 (file)
--- a/scss/_list-group.scss
+++ b/scss/_list-group.scss
@@ -152,12 +152,12 @@
 // Organizationally, this must come after the `:hover` states.
 
 @each $state, $value in $theme-colors {
-  $background: shift-color($value, $list-group-item-bg-scale);
-  $color: shift-color($value, $list-group-item-color-scale);
-  @if (contrast-ratio($background, $color) < $min-contrast-ratio) {
-    $color: mix($value, color-contrast($background), abs($alert-color-scale));
+  $list-group-background: shift-color($value, $list-group-item-bg-scale);
+  $list-group-color: shift-color($value, $list-group-item-color-scale);
+  @if (contrast-ratio($list-group-background, $list-group-color) < $min-contrast-ratio) {
+    $list-group-color: mix($value, color-contrast($list-group-background), abs($alert-color-scale));
   }
 
-  @include list-group-item-variant($state, $background, $color);
+  @include list-group-item-variant($state, $list-group-background, $list-group-color);
 }
 // scss-docs-end list-group-modifiers