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

jgthms · Oct 13, 2019 · f99771e · f99771e
1 parent f6ed0ae
commit f99771e
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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