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,7 +382,9 @@ $utilities: map-merge(
     "color": (
       property: color,
       class: text,
-      values: (
+      values: map-merge(
+        $theme-colors,
+        (
           white: $white,
           body: $body-color,
           muted: $text-muted,
@@ -360,6 +392,7 @@ $utilities: map-merge(
           white-50: rgba($white, .5),
           reset: inherit,
         )
+      )
     ),
     "background-color": (
       property: 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;
-}

site/content/docs/4.3/helpers/colored-links.md

@@ -0,0 +1,17 @@
+---
+layout: docs
+title: Colored links
+description: Colored links with hover states
+group: helpers
+toc: false
+---
+
+You can use the `.link-*` classes to colorize links. Unlike the [`.text-*` classes]({{< docsref "/utilities/colors#colors" >}}), these classes have a `:hover` and `:focus` state.
+
+{{< example >}}
+{{< colored-links.inline >}}
+{{- range (index $.Site.Data "theme-colors") }}
+<a href="#" class="link-{{ .name }}">{{ .name | title }} link</a>
+{{- end -}}
+{{< /colored-links.inline >}}
+{{< /example >}}

site/content/docs/4.3/helpers/text-truncation.md

@@ -3,11 +3,9 @@ layout: docs
 title: Text truncation
 description: Truncate long strings of text with an ellipsis.
 group: helpers
-toc: true
+toc: false
 ---
 
-## Text truncation
-
 For longer content, you can add a `.text-truncate` class to truncate the text with an ellipsis. **Requires `display: inline-block` or `display: block`.**
 
 {{< example >}}

site/content/docs/4.3/migration.md

@@ -60,6 +60,7 @@ Changes to Reboot, typography, tables, and more.
 - Reset default horizontal `padding-left` on `<ul>` and `<ol>` elements from browser default `40px` to `2rem`.
 - Simplified table styles (no more 2px border on `thead > th` elements) and tightened cell padding.
 - Dropped `.pre-scrollable` class. [See #29135](https://github.com/twbs/bootstrap/pull/29135)
+- `.text-*` utilities do not add hover and focus states to links anymore. `.link-*` helper classes can be used instead. [See #29267](https://github.com/twbs/bootstrap/pull/29267)
 
 ## Forms
 

site/content/docs/4.3/utilities/colors.md

@@ -8,6 +8,8 @@ toc: true
 
 ## Color
 
+Colorize text with color utilities. If you want to colorize links, you can use the [`.link-*` helper classes]({{< docsref "/helpers/colored-links" >}}) which have `:hover` and `:focus` states.
+
 {{< example >}}
 {{< colors.inline >}}
 {{- range (index $.Site.Data "theme-colors") }}
@@ -21,18 +23,6 @@ toc: true
 <p class="text-white-50 bg-dark">.text-white-50</p>
 {{< /example >}}
 
-Contextual text classes also work well on anchors with the provided hover and focus states. **Note that the `.text-white` and `.text-muted` class has no additional link styling beyond underline.**
-
-{{< example >}}
-{{< colors.inline >}}
-{{- range (index $.Site.Data "theme-colors") }}
-<p><a href="#" class="text-{{ .name }}{{ if eq .name "light" }} bg-dark{{ end }}">{{ .name | title }} link</a></p>
-{{- end -}}
-{{< /colors.inline >}}
-<p><a href="#" class="text-muted">Muted link</a></p>
-<p><a href="#" class="text-white bg-dark">White link</a></p>
-{{< /example >}}
-
 ## Background color
 
 Similar to the contextual text color classes, easily set the background of an element to any contextual class. Background utilities **do not set `color`**, so in some cases you'll want to use `.text-*` utilities.

site/data/sidebar.yml

@@ -67,11 +67,12 @@
 - title: Helpers
   pages:
     - title: Clearfix
+    - title: Colored links
     - title: Embed
     - title: Position
     - title: Screen readers
     - title: Stretched link
-    # - title: Text
+    - title: Text truncation
 
 - title: Utilities
   pages:

site/static/docs/4.3/assets/scss/_subnav.scss

@@ -49,14 +49,3 @@
   line-height: 1;
   color: $gray-900;
 }
-
-.link-dark {
-  font-weight: 500;
-  color: $dark;
-
-  &:hover,
-  &:focus {
-    color: $blue;
-    text-decoration: none;
-  }
-}