Reintroduce all text color utilities

.bundlewatch.config.json

@@ -22,15 +22,15 @@
     },
     {
       "path": "./dist/css/boosted-utilities.min.css",
-      "maxSize": "11.5 kB"
+      "maxSize": "11.75 kB"
     },
     {
       "path": "./dist/css/boosted.css",
       "maxSize": "42.5 kB"
     },
     {
       "path": "./dist/css/boosted.min.css",
-      "maxSize": "39.25 kB"
+      "maxSize": "39.5 kB"
     },
     {
       "path": "./dist/js/boosted.bundle.js",

scss/_alert.scss

@@ -78,7 +78,7 @@
 
 @each $state, $value in $alert-colors {
   .alert-#{$state} {
-    --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis);
+    --#{$prefix}alert-color: var(--#{$prefix}body-color); // Boosted mod: instead of `var(--#{$prefix}#{$state}-text-emphasis)`
     --#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle);
     // Boosted mod: no `--#{$prefix}alert-link-color`
     --#{$prefix}alert-icon-bg-image: #{map-get($alert-icons, $state)}; // Boosted mod

scss/_buttons.scss

@@ -156,6 +156,7 @@
 
   &.btn-inverse {
     --#{$prefix}btn-color: #{$white};
+    --#{$prefix}btn-hover-color: #{$white};
     --#{$prefix}btn-hover-border-color: #{$gray-700};
     --#{$prefix}btn-active-color: #{$brand-orange};
     --#{$prefix}btn-active-border-color: #{$gray-700};

scss/_footer.scss

@@ -16,6 +16,7 @@
 
     padding-top: var(--#{$prefix}footer-padding-top);
     padding-bottom: var(--#{$prefix}footer-padding-bottom);
+    color: var(--#{$prefix}body-color);
 
     .navbar-nav {
       --#{$prefix}nav-link-padding-x: 0;

scss/_maps.scss

@@ -112,13 +112,14 @@ $utilities-colors: $theme-colors-rgb !default;
 // scss-docs-end utilities-colors
 
 // scss-docs-start utilities-text-colors
-// Boosted mod: content of $utilities-text
-$utilities-text: (
-  "primary": to-rgb($accessible-orange),
-  "light": to-rgb($gray-500),
-  "black": to-rgb($black),
-  "white": to-rgb($white),
-  "body": to-rgb($body-color),
+$utilities-text: map-merge(
+  $utilities-colors,
+  (
+    "primary": to-rgb($accessible-orange),
+    "black": to-rgb($black),
+    "white": to-rgb($white),
+    "body": to-rgb($body-color)
+  )
 ) !default;
 $utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default;
 

scss/_navbar.scss

@@ -123,7 +123,10 @@
 
   // No focus
   &:hover {
-    color: var(--#{$prefix}navbar-brand-hover-color);
+    .title,
+    .two-lined {
+      color: var(--#{$prefix}navbar-brand-hover-color);
+    }
     text-decoration: if($link-hover-decoration == underline, none, null);
   }
 

scss/_root.scss

@@ -158,6 +158,8 @@
   --#{$boosted-prefix}kbd-color: #{$kbd-color-inverted};
   --#{$boosted-prefix}kbd-bg: #{$kbd-bg-inverted};
   --#{$boosted-prefix}pre-color: #{$pre-color-inverted};
+  --#{$prefix}body-color: #{$body-color-dark};
+  --#{$prefix}heading-color: #{$white};
 
   // stylelint-disable-next-line scss/selector-no-redundant-nesting-selector
   [class*="bg-"]:not(&):not(.bg-transparent) {
@@ -175,6 +177,8 @@
     --#{$boosted-prefix}kbd-color: #{$kbd-color};
     --#{$boosted-prefix}kbd-bg: #{$kbd-bg};
     --#{$boosted-prefix}pre-color: #{$pre-color};
+    --#{$prefix}body-color: #{$body-color};
+    --#{$prefix}heading-color: #{$black};
   }
 }
 // End mod

scss/_tags.scss

@@ -28,7 +28,7 @@
   @include font-size(var(--#{$prefix}tag-font-size));
   font-weight: var(--#{$prefix}tag-font-weight);
   line-height: add(var(--#{$prefix}tag-font-size), .125rem);
-  color: inherit;
+  color: var(--#{$prefix}body-color);
   background-color: transparent;
   border: var(--#{$prefix}tag-border-width) solid var(--#{$prefix}tag-border-color);
   @include border-radius(var(--#{$prefix}tag-border-radius), var(--#{$prefix}tag-border-radius));
@@ -96,7 +96,7 @@
 a.tag,
 button.tag,
 label.tag {
-  color: inherit;
+  color: var(--#{$prefix}body-color);
   text-decoration: none;
   cursor: pointer;
 

scss/_variables-dark.scss

@@ -10,12 +10,12 @@
 // scss-docs-start theme-text-dark-variables
 $primary-text-emphasis-dark:        $primary !default; // Boosted mod: isntead of `tint-color($primary, 40%)`
 $secondary-text-emphasis-dark:      $secondary !default; // Boosted mod: instead of `tint-color($secondary, 40%)`
-$success-text-emphasis-dark:        null !default; // Boosted mod: instead of `tint-color($success, 40%)`
-$info-text-emphasis-dark:           null !default; // Boosted mod: instead of `tint-color($info, 40%)`
-$warning-text-emphasis-dark:        null !default; // Boosted mod: instead of `tint-color($warning, 40%)`
-$danger-text-emphasis-dark:         null !default; // Boosted mod: instead of `tint-color($danger, 40%)`
+$success-text-emphasis-dark:        $success !default; // Boosted mod: instead of `tint-color($success, 40%)`
+$info-text-emphasis-dark:           $info !default; // Boosted mod: instead of `tint-color($info, 40%)`
+$warning-text-emphasis-dark:        $warning !default; // Boosted mod: instead of `tint-color($warning, 40%)`
+$danger-text-emphasis-dark:         $danger !default; // Boosted mod: instead of `tint-color($danger, 40%)`
 $light-text-emphasis-dark:          $light !default; // Boosted mod: instead of `$gray-100`
-$dark-text-emphasis-dark:           null !default; // Boosted mod: instead of `$gray-300`
+$dark-text-emphasis-dark:           $dark !default; // Boosted mod: instead of `$gray-300`
 // scss-docs-end theme-text-dark-variables
 
 // scss-docs-start theme-bg-subtle-dark-variables

scss/_variables.scss

@@ -342,14 +342,14 @@ $theme-colors: (
 // scss-docs-end theme-colors-map
 
 // scss-docs-start theme-text-variables
-$primary-text-emphasis:   $primary !default; // Boosted mod: instead of `shade-color($primary, 60%)`
+$primary-text-emphasis:   $accessible-orange !default; // Boosted mod: instead of `shade-color($primary, 60%)`
 $secondary-text-emphasis: $secondary !default; // Boosted mod: instead of `shade-color($secondary, 60%)`
-$success-text-emphasis:   null !default; // Boosted mod: instead of `shade-color($success, 60%)`
-$info-text-emphasis:      null !default; // Boosted mod: instead of `shade-color($info, 60%)`
-$warning-text-emphasis:   null !default; // Boosted mod: instead of `shade-color($warning, 60%)`
-$danger-text-emphasis:    null !default; // Boosted mod: instead of `shade-color($danger, 60%)`
+$success-text-emphasis:   $success !default; // Boosted mod: instead of `shade-color($success, 60%)`
+$info-text-emphasis:      $info !default; // Boosted mod: instead of `shade-color($info, 60%)`
+$warning-text-emphasis:   $warning !default; // Boosted mod: instead of `shade-color($warning, 60%)`
+$danger-text-emphasis:    $danger !default; // Boosted mod: instead of `shade-color($danger, 60%)`
 $light-text-emphasis:     $light !default; // Boosted mod: instead of `$gray-700`
-$dark-text-emphasis:      null !default; // Boosted mod: instead of `$gray-700`
+$dark-text-emphasis:      $dark !default; // Boosted mod: instead of `$gray-700`
 // scss-docs-end theme-text-variables
 
 // scss-docs-start theme-bg-subtle-variables

scss/helpers/_colored-links.scss

@@ -1,9 +1,8 @@
 // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
-@each $color, $value in ("primary": $accessible-orange, "light": $light) { // Boosted mod: restrict to primary and light
+@each $color, $value in $theme-colors {
   .link-#{$color} {
-    color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
+    color: RGBA(if($color == "primary", var(--#{$prefix}#{$color}-text-rgb), var(--#{$prefix}#{$color}-rgb)), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null); // Boosted mod: adapt to the right variable for primary
     text-decoration-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
-    background-color: color-contrast($value) if($enable-important-utilities, !important, null); // Boosted mod: ensure contrast
 
     @if $link-shade-percentage != 0 {
       // Boosted mod: no &:focus

scss/mixins/_utilities.scss

@@ -83,56 +83,6 @@
               }
             }
             #{$property}: $value if($enable-important-utilities, !important, null);
-
-            // Boosted mod: ensure contrasts in color utilities
-            @if "background-color" == $property {
-              @if type-of($value) == "string" {
-                $color-name: get-color-from-rgba-string($value);
-                @if undefined != $color-name {
-                  @if map-has-key($theme-colors, $color-name) {
-                    $value: map-get($theme-colors, $color-name);
-                  }
-                  // Handle colors not in $theme-colors
-                  @else if $color-name == "black" {
-                    $value: $black;
-                  }
-                }
-              }
-
-              @if "transparent" != inspect($value) and type-of($value) != "string" {
-                color: color-contrast($value);
-              }
-              @else if $value == "var(--bs-secondary-bg-subtle)" or $value == "var(--bs-dark-bg-subtle)" {
-                color: var(--bs-white);
-              }
-            }
-            @else if "color" == $property {
-              @if type-of($value) == "string" {
-                $color-name: get-color-from-rgba-string($value);
-                @if undefined != $color-name {
-                  @if map-has-key($theme-colors, $color-name) {
-                    $value: map-get($theme-colors, $color-name);
-                  }
-                  // Handle colors not in $theme-colors
-                  @else if $color-name == "white" {
-                    $value: $white;
-                  } @else if $color-name == "body-color" {
-                    $value: $black;
-                  } @else if $color-name == "black" {
-                    background: var(--bs-white);
-                  }
-                }
-              }
-
-              @if $value == $white or $value == $light {
-                background: color-contrast($value);
-              } @else if $value == "var(--bs-light-text-emphasis)" {
-                background: var(--bs-black);
-              } @else if $value == $body-color {
-                background: var(--bs-body-bg);
-              }
-            }
-            // End mod
           }
         }
 

site/content/docs/5.3/components/card.md

@@ -423,19 +423,21 @@ Cards include various options for customizing their backgrounds, borders, and co
 
 Set a `background-color` with contrasting foreground `color` with [our `.text-bg-{color}` helpers]({{< docsref "helpers/color-background" >}}). Previously it was required to manually pair your choice of [`.text-{color}`]({{< docsref "/utilities/colors" >}}) and [`.bg-{color}`]({{< docsref "/utilities/background" >}}) utilities for styling, which you still may use if you prefer.
 
+<!-- Boosted mod: move text-bg-{{ .name }} on card-body -->
 {{< example >}}
 {{< card.inline >}}
 {{- range (index $.Site.Data "theme-colors") }}
-<div class="card text-bg-{{ .name }} mb-3" style="max-width: 18rem;">
+<div class="card mb-3" style="max-width: 18rem;">
   <div class="card-header">Header</div>
-  <div class="card-body">
+  <div class="card-body text-bg-{{ .name }} ">
     <h5 class="card-title">{{ .name | title }} card title</h5>
     <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
   </div>
 </div>
 {{- end -}}
 {{< /card.inline >}}
 {{< /example >}}
+<!-- End mod -->
 
 {{< callout info >}}
 {{< partial "callouts/warning-color-assistive-technologies.md" >}}

site/content/docs/5.3/components/spinners.md

@@ -43,7 +43,7 @@ The border spinner uses `currentColor` for its `border-color`, meaning you can c
 <div class="spinner-border text-primary" role="status">
   <span class="visually-hidden">Loading...</span>
 </div>
-<div class="spinner-border text-secondary" role="status">
+<div class="spinner-border" role="status">
   <span class="visually-hidden">Loading...</span>
 </div>
 {{< /example >}}
@@ -52,7 +52,7 @@ The border spinner uses `currentColor` for its `border-color`, meaning you can c
 <div class="spinner-border text-primary" role="status">
   <span class="visually-hidden">Loading...</span>
 </div>
-<div class="spinner-border text-secondary" role="status">
+<div class="spinner-border text-white" role="status">
   <span class="visually-hidden">Loading...</span>
 </div>
 {{< /example >}}
@@ -81,7 +81,7 @@ Once again, this spinner is built with `currentColor`, so you can easily change
 <div class="spinner-grow text-primary" role="status">
   <span class="visually-hidden">Loading...</span>
 </div>
-<div class="spinner-grow text-secondary" role="status">
+<div class="spinner-grow" role="status">
   <span class="visually-hidden">Loading...</span>
 </div>
 {{< /example >}}
@@ -90,7 +90,7 @@ Once again, this spinner is built with `currentColor`, so you can easily change
 <div class="spinner-grow text-primary" role="status">
   <span class="visually-hidden">Loading...</span>
 </div>
-<div class="spinner-grow text-secondary" role="status">
+<div class="spinner-grow text-white" role="status">
   <span class="visually-hidden">Loading...</span>
 </div>
 {{< /example >}}

site/content/docs/5.3/customize/color.md

@@ -518,7 +518,7 @@ Check out [our Sass maps and loops docs]({{< docsref "/customize/sass#maps-and-l
 ### All colors
 
 {{< design-callout-alert >}}
-Some of the colors below, especially the **variants suffixed by** `-100` **to** `-900`, do not belong the Orange Design System specifications.
+Some of the colors below, especially the **variants suffixed by** `-100` **to** `-900`, do not belong to the Orange Design System specifications.
 
 Please refer to our Boosted [Orange's colors]({{< docsref "/customize/color#oranges-colors" >}}) section and to the [Color](https://system.design.orange.com/0c1af118d/p/7059a5-colour/b/17b829) guidelines on the Orange Design System website.
 {{< /design-callout-alert >}}

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

@@ -8,6 +8,13 @@ aliases:
 toc: true
 ---
 
+{{< design-callout-alert >}}
+The colors combinations below do not belong to the Orange Design System specifications.
+
+Please refer to our Boosted [links]({{< docsref "/content/typography#links" >}}) section and to the [Text links in body copy](https://system.design.orange.com/0c1af118d/p/38f221-typography/t/56933e) guidelines on the Orange Design System website.
+
+{{< /design-callout-alert >}}
+
 ## Link colors
 
 You can use the `.link-*` classes to colorize links. Unlike the [`.text-*` classes]({{< docsref "/utilities/colors" >}}), these classes have a `:hover` and `:focus` state. Some of the link styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.
@@ -16,14 +23,20 @@ You can use the `.link-*` classes to colorize links. Unlike the [`.text-*` class
 **Heads up!** `.link-body-emphasis` is currently the only colored link that adapts to color modes. It's treated as a special case until v6 arrives and we can more thoroughly rebuild our theme colors for color modes. Until then, it's a unique, high-contrast link color with custom `:hover` and `:focus` styles. However, it still responds to the new link utilities.
 {{< /callout >}}
 
-<!--Boosted mod: feature limited to primary and light, we don't loop over "theme-colors"; body-emphasis is treated on its own-->
+<!--Boosted mod: add bg-dark on the links which need it to ensure contrast-->
 {{< example >}}
-<p><a href="#" class="link-primary">Primary link</a></p>
-<p><a href="#" class="link-light">Light link</a></p>
+{{< colored-links.inline >}}
+  {{- range (index $.Site.Data "theme-colors") }}
+    <p><a href="#" class="link-{{ .name }} {{ if or (eq .name "primary") (eq .name "success") (eq .name "warning") (eq .name "info") (eq .name "light") -}}bg-dark{{- end }}">{{ .name | title }} link</a></p>
+  {{- end -}}
+{{< /colored-links.inline >}}
 <p><a href="#" class="link-body-emphasis">Emphasis link</a></p>
 {{< /example >}}
+<!--End mod-->
 
-<!--Boosted mod: removed callout not applicable to our modified example-->
+{{< callout info >}}
+{{< partial "callouts/warning-color-assistive-technologies.md" >}}
+{{< /callout >}}
 
 ## Link utilities
 

site/content/docs/5.3/utilities/background.md

@@ -23,18 +23,18 @@ Background utilities like `.bg-*` that generated from our original `$theme-color
 <!-- Boosted mod: inconsistent background color & naming, showing only supporting color naming -->
 {{< example >}}
 <div class="p-3 mb-2 fw-bold bg-primary">.bg-primary</div>
-<div class="p-3 mb-2 fw-bold bg-secondary">.bg-secondary</div>
+<div class="p-3 mb-2 fw-bold bg-secondary text-white">.bg-secondary</div>
 <div class="p-3 mb-2 fw-bold bg-supporting-green">.bg-supporting-green</div>
 <div class="p-3 mb-2 fw-bold bg-supporting-purple">.bg-supporting-purple</div>
 <div class="p-3 mb-2 fw-bold bg-supporting-yellow">.bg-supporting-yellow</div>
 <div class="p-3 mb-2 fw-bold bg-supporting-blue">.bg-supporting-blue</div>
 <div class="p-3 mb-2 fw-bold bg-supporting-pink">.bg-supporting-pink</div>
 <div class="p-3 mb-2 fw-bold bg-light">.bg-light</div>
-<div class="p-3 mb-2 fw-bold bg-dark">.bg-dark</div>
+<div class="p-3 mb-2 fw-bold bg-dark text-white">.bg-dark</div>
 <div class="p-3 mb-2 fw-bold bg-body-secondary">.bg-body-secondary</div>
 <div class="p-3 mb-2 fw-bold bg-body-tertiary">.bg-body-tertiary</div>
 <div class="p-3 mb-2 fw-bold bg-body">.bg-body</div>
-<div class="p-3 mb-2 fw-bold bg-black">.bg-black</div>
+<div class="p-3 mb-2 fw-bold bg-black text-white">.bg-black</div>
 <div class="p-3 mb-2 fw-bold bg-white">.bg-white</div>
 <div class="p-3 mb-2 fw-bold bg-transparent">.bg-transparent</div>
 {{< /example >}}