Link helpers & use utility API for all utilities

scss/_helpers.scss

@@ -1,7 +1,8 @@
 @import "helpers/background";
 @import "helpers/clearfix";
+@import "helpers/colored-links";
 @import "helpers/embed";
 @import "helpers/position";
 @import "helpers/screenreaders";
 @import "helpers/stretched-link";
-@import "helpers/text";
+@import "helpers/text-truncation";

scss/_mixins.scss

@@ -14,7 +14,6 @@
 @import "mixins/resize";
 @import "mixins/screen-reader";
 @import "mixins/reset-text";
-@import "mixins/text-emphasis";
 @import "mixins/text-truncate";
 
 // Utilities

scss/_utilities.scss

@@ -91,6 +91,21 @@ $utilities: map-merge(
         auto: auto
       )
     ),
+    "max-width": (
+      property: max-width,
+      class: mw,
+      values: (100: 100%)
+    ),
+    "viewport-width": (
+      property: width,
+      class: vw,
+      values: (100: 100vw)
+    ),
+    "min-viewport-width": (
+      property: min-width,
+      class: min-vw,
+      values: (100: 100vw)
+    ),
     "height": (
       property: height,
       class: h,
@@ -102,6 +117,21 @@ $utilities: map-merge(
         auto: auto
       )
     ),
+    "max-height": (
+      property: max-height,
+      class: mh,
+      values: (100: 100%)
+    ),
+    "viewport-height": (
+      property: height,
+      class: vh,
+      values: (100: 100vh)
+    ),
+    "min-viewport-height": (
+      property: min-height,
+      class: min-vh,
+      values: (100: 100vh)
+    ),
     // Flex utilities
     "flex": (
       responsive: true,
@@ -352,13 +382,16 @@ $utilities: map-merge(
     "color": (
       property: color,
       class: text,
-      values: (
-        white: $white,
-        body: $body-color,
-        muted: $text-muted,
-        black-50: rgba($black, .5),
-        white-50: rgba($white, .5),
-        reset: inherit,
+      values: map-merge(
+        $theme-colors,
+        (
+          white: $white,
+          body: $body-color,
+          muted: $text-muted,
+          black-50: rgba($black, .5),
+          white-50: rgba($white, .5),
+          reset: inherit,
+        )
       )
     ),
     "background-color": (
@@ -431,6 +464,14 @@ $utilities: map-merge(
       class: rounded-left,
       values: (null: $border-radius)
     ),
+    "visibility": (
+      property: visibility,
+      class: null,
+      values: (
+        visible: visible,
+        invisible: hidden,
+      )
+    )
   ),
   $utilities
 );

scss/bootstrap-utilities.scss

@@ -16,6 +16,3 @@
 // Utilities
 
 @import "utilities/api";
-@import "utilities/sizing";
-@import "utilities/text";
-@import "utilities/visibility";

scss/bootstrap.scss

@@ -52,6 +52,3 @@
 // Utilities
 
 @import "utilities/api";
-@import "utilities/sizing";
-@import "utilities/text";
-@import "utilities/visibility";

scss/helpers/_colored-links.scss

@@ -0,0 +1,12 @@
+@each $color, $value in $theme-colors {
+  .link-#{$color} {
+    color: $value;
+
+    @if $emphasized-link-hover-darken-percentage != 0 {
+      &:hover,
+      &:focus {
+        color: darken($value, $emphasized-link-hover-darken-percentage);
+      }
+    }
+  }
+}

scss/helpers/_text-truncation.scss

@@ -1,5 +1,5 @@
 //
-// Text
+// Text truncation
 //
 
 .text-truncate {

scss/mixins/_text-emphasis.scss

@@ -1,17 +0,0 @@
-// stylelint-disable declaration-no-important
-
-// Typography
-
-@mixin text-emphasis-variant($parent, $color) {
-  #{$parent} {
-    color: $color !important;
-  }
-  @if $emphasized-link-hover-darken-percentage != 0 {
-    a#{$parent} {
-      &:hover,
-      &:focus {
-        color: darken($color, $emphasized-link-hover-darken-percentage) !important;
-      }
-    }
-  }
-}

scss/mixins/_utilities.scss

@@ -17,11 +17,13 @@
     }
 
     // Use custom class if present
-    $property-class: map-get($utility, class);
-    $property-class: if($property-class, $property-class, nth($properties, 1));
+    $property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1));
+    $property-class: if($property-class == null, "", $property-class);
+
+    $infix: if($property-class == "" and str-slice($infix, 1, 1) == "-", str-slice($infix, 2), $infix);
 
     // Don't prefix if value key is null (eg. with shadow class)
-    $property-class-modifier: if($key, "-" + $key, "");
+    $property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");
 
     .#{$property-class + $infix + $property-class-modifier} {
       @each $property in $properties {

scss/utilities/_sizing.scss

@@ -1,12 +0,0 @@
-// stylelint-disable declaration-no-important
-
-.mw-100 { max-width: 100% !important; }
-.mh-100 { max-height: 100% !important; }
-
-// Viewport additional helpers
-
-.min-vw-100 { min-width: 100vw !important; }
-.min-vh-100 { min-height: 100vh !important; }
-
-.vw-100 { width: 100vw !important; }
-.vh-100 { height: 100vh !important; }

scss/utilities/_text.scss

@@ -1,7 +0,0 @@
-//
-// Text
-//
-
-@each $color, $value in $theme-colors {
-  @include text-emphasis-variant(".text-#{$color}", $value);
-}

scss/utilities/_visibility.scss

@@ -1,13 +0,0 @@
-// stylelint-disable declaration-no-important
-
-//
-// Visibility utilities
-//
-
-.visible {
-  visibility: visible !important;
-}
-
-.invisible {
-  visibility: hidden !important;
-}