fix(sass): rename $background-color variable in our loops

We were overriding this variable so the user couldn’t reference what
they set it to.

Fixes #8475

src/components/button/button.ios.scss

@@ -157,17 +157,17 @@ $button-ios-round-border-radius:                    $button-round-border-radius
 // --------------------------------------------------
 
 @mixin ios-button-default($color-name, $color-base, $color-contrast) {
-  $background-color: $color-base;
-  $background-color-activated: color-shade($background-color);
+  $bg-color: $color-base;
+  $bg-color-activated: color-shade($bg-color);
   $fg-color: $color-contrast;
 
   .button-ios-#{$color-name} {
     color: $fg-color;
-    background-color: $background-color;
+    background-color: $bg-color;
   }
 
   .button-ios-#{$color-name}.activated {
-    background-color: $background-color-activated;
+    background-color: $bg-color-activated;
   }
 }
 

src/components/button/button.md.scss

@@ -204,21 +204,21 @@ $button-md-round-border-radius:                 $button-round-border-radius !def
 // --------------------------------------------------
 
 @mixin md-button-default($color-name, $color-base, $color-contrast) {
-  $background-color: $color-base;
-  $background-color-activated: color-shade($background-color);
+  $bg-color: $color-base;
+  $bg-color-activated: color-shade($bg-color);
   $fg-color: $color-contrast;
 
   .button-md-#{$color-name} {
     color: $fg-color;
-    background-color: $background-color;
+    background-color: $bg-color;
   }
 
   .button-md-#{$color-name}:hover:not(.disable-hover) {
-    background-color: $background-color;
+    background-color: $bg-color;
   }
 
   .button-md-#{$color-name}.activated {
-    background-color: $background-color-activated;
+    background-color: $bg-color-activated;
     opacity: $button-md-opacity-activated;
   }
 

src/components/fab/fab.ios.scss

@@ -45,17 +45,17 @@ $fab-ios-in-list-background-color-activated:  color-shade($fab-ios-in-list-backg
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
 
-  $background-color: $color-base;
-  $background-color-activated: color-shade($background-color);
+  $bg-color: $color-base;
+  $bg-color-activated: color-shade($bg-color);
   $fg-color: $color-contrast;
 
   .fab-ios.fab-ios-#{$color-name} {
     color: $fg-color;
-    background-color: $background-color;
+    background-color: $bg-color;
   }
 
   .fab-ios.fab-ios-#{$color-name}.activated {
-    background-color: $background-color-activated;
+    background-color: $bg-color-activated;
   }
 }
 

src/components/fab/fab.md.scss

@@ -59,17 +59,17 @@ $fab-md-in-list-background-color-activated: color-shade($fab-md-in-list-backgrou
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
 
-  $background-color: $color-base;
-  $background-color-activated: color-shade($background-color);
+  $bg-color: $color-base;
+  $bg-color-activated: color-shade($bg-color);
   $fg-color: $color-contrast;
 
   .fab-md.fab-md-#{$color-name} {
     color: $fg-color;
-    background-color: $background-color;
+    background-color: $bg-color;
   }
 
   .fab-md.fab-md-#{$color-name}.activated {
-    background-color: $background-color-activated;
+    background-color: $bg-color-activated;
   }
 }
 

src/components/fab/fab.wp.scss

@@ -46,16 +46,16 @@ $fab-wp-in-list-background-color-activated: color-shade($fab-wp-in-list-backgrou
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
 
-  $background-color: $color-base;
-  $background-color-activated: color-shade($background-color);
+  $bg-color: $color-base;
+  $bg-color-activated: color-shade($bg-color);
   $fg-color: $color-contrast;
 
   .fab-wp.fab-wp-#{$color-name} {
     color: $fg-color;
-    background-color: $background-color;
+    background-color: $bg-color;
   }
 
   .fab-wp.fab-wp-#{$color-name}.activated {
-    background-color: $background-color-activated;
+    background-color: $bg-color-activated;
   }
 }