modified the yiq to to an actual function

function only returns a value, not the attribute itself
updated every use of the former mixin to use the new function

diff --git a/assets/scss/_colors.scss b/assets/scss/_colors.scss
index d09d3a2c574daa2e35869626c38aa29ab326e72b..8d2825c5700e860229fa51f2d5b9419549641909 100644 (file)
--- a/assets/scss/_colors.scss
+++ b/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);
   }
 }

diff --git a/scss/_functions.scss b/scss/_functions.scss
index a63680aa5ca38349c7019c80a5cd52b19737cdde..bbb015d07ec734bc1079406e0d599d3126a6bfa9 100644 (file)
--- a/scss/_functions.scss
+++ b/scss/_functions.scss
@@ -49,7 +49,7 @@
 }
 
 // Color contrast
-@mixin color-yiq($color) {
+@function color-yiq($color) {
   $r: red($color);
   $g: green($color);
   $b: blue($color);
@@ -57,9 +57,9 @@
   $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
 
   @if ($yiq >= 150) {
-    color: #111;
+    @return #111;
   } @else {
-    color: #fff;
+    @return #fff;
   }
 }
 

diff --git a/scss/mixins/_badge.scss b/scss/mixins/_badge.scss
index 257a6abb7d888212f2bc3e8a3f0e71bcafbafb82..c1caafe487df9d479c31b8591ee25ee0e7119c0a 100644 (file)
--- a/scss/mixins/_badge.scss
+++ b/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%);
     }
   }

diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index 44ce4f72e264b97535cf10163e822959e2294d62..ef623ccd55e1a0c1d806e0be6dc4a8182debb3e8 100644 (file)
--- a/scss/mixins/_buttons.scss
+++ b/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;
   }