Derive ‘-invert’ sass variables from primary colors (#2594)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c375b48fdf8f7e095991859bae2b83acd6203763..c9f0e3ba8d2d27c046c9713f1b6894b5f1272d24 100644 (file)
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@
 * Fix #2647 -> Missing meta tags in snippet
 * Fix #2031, Fix #2483 -> Invalid output when declaring a custom shade map
 * Fix #2060 -> `height: auto` on HTML `audio` element breaks height of element
+* Fix #706 -> Derive `-invert` variables using `findColorInvert()`
 * #1608 Fix #1552 -> `.container.is-fluid` margins
 
 ### New features

diff --git a/docs/_data/variables/utilities/derived-variables.json b/docs/_data/variables/utilities/derived-variables.json
index 23c2eedc7df179814944db5bcce5f57a44603782..668d32e6b43b2b4ab849480f442c4fbf7d1e61df 100644 (file)
--- a/docs/_data/variables/utilities/derived-variables.json
+++ b/docs/_data/variables/utilities/derived-variables.json
@@ -107,49 +107,49 @@
     },
     "$primary-invert": {
       "name": "$primary-invert",
-      "value": "$turquoise-invert",
+      "value": "findColorInvert($primary)",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "#fff"
     },
     "$info-invert": {
       "name": "$info-invert",
-      "value": "$cyan-invert",
+      "value": "findColorInvert($info)",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "#fff"
     },
     "$success-invert": {
       "name": "$success-invert",
-      "value": "$green-invert",
+      "value": "findColorInvert($success)",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "#fff"
     },
     "$warning-invert": {
       "name": "$warning-invert",
-      "value": "$yellow-invert",
+      "value": "findColorInvert($warning)",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "rgba(0, 0, 0, 0.7)"
     },
     "$danger-invert": {
       "name": "$danger-invert",
-      "value": "$red-invert",
+      "value": "findColorInvert($danger)",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "#fff"
     },
     "$light-invert": {
       "name": "$light-invert",
-      "value": "$dark",
+      "value": "findColorInvert($light)",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 21%)"
     },
     "$dark-invert": {
       "name": "$dark-invert",
-      "value": "$light",
+      "value": "findColorInvert($dark)",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 96%)"
@@ -240,7 +240,7 @@
     },
     "$link-invert": {
       "name": "$link-invert",
-      "value": "$blue-invert",
+      "value": "findColorInvert($link)",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "#fff"

diff --git a/sass/utilities/derived-variables.sass b/sass/utilities/derived-variables.sass
index 7b53ec8993e0c1b1c155d8357c366a773a5591c9..8f255145b5550583069c47c9f1477b75c3b2b779 100644 (file)
--- a/sass/utilities/derived-variables.sass
+++ b/sass/utilities/derived-variables.sass
@@ -19,13 +19,13 @@ $blue-invert: findColorInvert($blue) !default
 $purple-invert: findColorInvert($purple) !default
 $red-invert: findColorInvert($red) !default
 
-$primary-invert: $turquoise-invert !default
-$info-invert: $cyan-invert !default
-$success-invert: $green-invert !default
-$warning-invert: $yellow-invert !default
-$danger-invert: $red-invert !default
-$light-invert: $dark !default
-$dark-invert: $light !default
+$primary-invert: findColorInvert($primary) !default
+$info-invert: findColorInvert($info) !default
+$success-invert: findColorInvert($success) !default
+$warning-invert: findColorInvert($warning) !default
+$danger-invert: findColorInvert($danger) !default
+$light-invert: findColorInvert($light) !default
+$dark-invert: findColorInvert($dark) !default
 
 // General colors
 
@@ -54,7 +54,7 @@ $pre-background: $background !default
 // Link colors
 
 $link: $blue !default
-$link-invert: $blue-invert !default
+$link-invert: findColorInvert($link) !default
 $link-visited: $purple !default
 
 $link-hover: $grey-darker !default