diff --git a/Gruntfile.js b/Gruntfile.js
index 88b6c9cf..edba40e1 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -29,10 +29,17 @@ module.exports = function(grunt) {
             },
 
             // button variations mixin replacement(s)
-            { // Multi-line replacement -https://regex101.com/r/qD9qB8/2
+            { // Multi-line replacement - https://regex101.com/r/qD9qB8/2
               pattern: /.generic-variations\(unquote\(("[^"]+")\), (\$[\s\S]+?(?!\r|\n)), {$\n[\s\S]+?(?!\r|\n)contrast[\s\S]+?(?!\r|\n)(\d+)[\s\S]+?(?!\r|\n)}\);$\n/mg,
               replacement: '@include button-variations(unquote($1), $2, $3%);\n',
               order: 20
+            },
+
+            // background-color generic-variations
+            { // Multi-line replacement - https://regex101.com/r/cW6pH8/2
+              pattern: /.generic-variations\(unquote\(("[^"]+")\), (\$[\s\S]+?(?!\r|\n)), {$\n[\s\S]+?(?!\r|\n)background-color[\s\S]+?(?!\r|\n)(\(\d+\/\d+\))[\s\S]+?(?!\r|\n)}\);$\n/mg,
+              replacement: '@include bg-color-variations(unquote($1), $2, $3);\n',
+              order: 21
             }
 
           ]
diff --git a/sass/_buttons.scss b/sass/_buttons.scss
index 35218041..91a35658 100644
--- a/sass/_buttons.scss
+++ b/sass/_buttons.scss
@@ -30,9 +30,7 @@
   // BTN .active effect
   @include button-variations(unquote(".active:not(.btn-link):not(.btn-flat)"), $btn-default, 6%);
   // BTN flat hover effect
-  .generic-variations(unquote(".btn-flat:hover:not(.btn-link)"), $btn-default, {
-    background-color: rgba($material-color, (20/100));
-  });
+  @include bg-color-variations(unquote(".btn-flat:hover:not(.btn-link)"), $btn-default, (20/100));
 
 }
 
diff --git a/sass/_mixins-shared.scss b/sass/_mixins-shared.scss
index b919fd02..a01fcf43 100644
--- a/sass/_mixins-shared.scss
+++ b/sass/_mixins-shared.scss
@@ -19,6 +19,10 @@
   background-color: contrast($material-color, darken($material-color, $material-param-1), lighten($material-color, $material-param-1), $contrast-factor);
 }
 
+@mixin bg-color-variations-content($material-color-name, $material-color-full-name, $material-color, $material-text-color, $material-param-1) {
+  background-color: rgba($material-color, $material-param-1);
+}
+
 // interpolation of mixin-name is not allowed evidently, so we statically include based on the mixin-name given
 @mixin call-variations-content-mixin($mixin-name, $material-color-name, $material-color-full-name, $material-color, $material-text-color, $material-param-1) {
   @if $mixin-name == variations-content {
@@ -29,6 +33,8 @@
     @include text-variations-content($material-color-name, $material-color-full-name, $material-color, $material-text-color, $material-param-1);
   } @else if $mixin-name == button-variations-content {
     @include button-variations-content($material-color-name, $material-color-full-name, $material-color, $material-text-color, $material-param-1);
+  } @else if $mixin-name == bg-color-variations-content {
+    @include bg-color-variations-content($material-color-name, $material-color-full-name, $material-color, $material-text-color, $material-param-1);
   } @else {
     @error "Unknown mixin: #{$mixin-name}"
   }
@@ -48,7 +54,11 @@
 }
 
 @mixin button-variations($extra, $default, $material-param-1) {
-  @include generic-variations($extra, $default, "variations-content", $material-param-1);
+  @include generic-variations($extra, $default, "button-variations-content", $material-param-1);
+}
+
+@mixin bg-color-variations($extra, $default, $material-param-1) {
+  @include generic-variations($extra, $default, "bg-color-variations-content", $material-param-1);
 }
 
 //
@@ -133,7 +143,6 @@
   @include generic-variations-colors($mixin-name, $extra, $default, $contrast-factor, $material-param-1)
 }
 
-
 @mixin generic-variations-color($mixin-name, $extra, $default, $contrast-factor, $material-color-name, $material-color-number, $material-param-1) {
   & -material-#{$material-color-name}#{unquote($material-color-number)}#{$extra} {
     $material-color-full-name: "#{$material-color-name}#{$material-color-number}" !default;
diff --git a/sass/_togglebutton.scss b/sass/_togglebutton.scss
index e9d1ac56..fa02d777 100644
--- a/sass/_togglebutton.scss
+++ b/sass/_togglebutton.scss
@@ -55,9 +55,7 @@
   }
 
   // Switch bg on
-  .generic-variations(unquote(" label input[type=checkbox]:checked + .toggle"), $primary, {
-    background-color: rgba($material-color, (50/100));
-  });
+  @include bg-color-variations(unquote(" label input[type=checkbox]:checked + .toggle"), $primary, (50/100));
   // Handle on
   @include variations(unquote(" label input[type=checkbox]:checked + .toggle:after"), background-color, $primary);
   // Ripple on