change yiq mixin to an actual function

assets/scss/_colors.scss

@@ -4,21 +4,21 @@
 
 @each $color, $value in $colors {
   .swatch-#{$color} {
+    color: color-yiq($value);
     background-color: #{$value};
-    @include color-yiq($value);
   }
 }
 
 @each $color, $value in $theme-colors {
   .swatch-#{$color} {
+    color: color-yiq($value);
     background-color: #{$value};
-    @include color-yiq($value);
   }
 }
 
 @each $color, $value in $grays {
   .swatch-#{$color} {
+    color: color-yiq($value);
     background-color: #{$value};
-    @include color-yiq($value);
   }
 }

scss/_functions.scss

@@ -49,17 +49,17 @@
 }
 
 // Color contrast
-@mixin color-yiq($color) {
+@function color-yiq($color) {
   $r: red($color);
   $g: green($color);
   $b: blue($color);
 
   $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
 
   @if ($yiq >= 150) {
-    color: #111;
+    @return #111;
   } @else {
-    color: #fff;
+    @return #fff;
   }
 }
 

scss/mixins/_badge.scss

@@ -1,11 +1,11 @@
 @mixin badge-variant($bg) {
-  @include color-yiq($bg);
+  color: color-yiq($bg);
   background-color: $bg;
 
   &[href] {
     @include hover-focus {
-      @include color-yiq($bg);
       text-decoration: none;
+      color: color-yiq($bg);
       background-color: darken($bg, 10%);
     }
   }

scss/mixins/_buttons.scss

@@ -4,13 +4,13 @@
 // and disabled options for all buttons
 
 @mixin button-variant($background, $border, $active-background: darken($background, 7.5%), $active-border: darken($border, 10%)) {
-  @include color-yiq($background);
+  color: color-yiq($background);
   background-color: $background;
   border-color: $border;
   @include box-shadow($btn-box-shadow);
 
   @include hover {
-    @include color-yiq($active-background);
+    color: color-yiq($active-background);
     background-color: $active-background;
     border-color: $active-border;
   }