Link helpers & use utility API for all utilities

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;
-  }
-}