feat(utilities): reintroduce all text color utilities from Bootstrap (#…

…2030)

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
Co-authored-by: Louis-Maxime Piton <louismaxime.piton@orange.com>

.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"
+      "maxSize": "42.75 kB"
     },
     {
       "path": "./dist/css/boosted.min.css",
-      "maxSize": "39.5 kB"
+      "maxSize": "39.75 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), // Boosted mod
+    "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 @@
   --#{$prefix}kbd-color: #{$kbd-color-inverted};
   --#{$prefix}kbd-bg: #{$kbd-bg-inverted};
   --#{$prefix}pre-color: #{$pre-color-inverted};
+  --#{$prefix}body-color: #{$body-color-dark};
+  --#{$prefix}heading-color: #{$headings-color-dark};
 
   // stylelint-disable-next-line scss/selector-no-redundant-nesting-selector
   [class*="bg-"]:not(&):not(.bg-transparent) {
@@ -175,6 +177,8 @@
     --#{$prefix}kbd-color: #{$kbd-color};
     --#{$prefix}kbd-bg: #{$kbd-bg};
     --#{$prefix}pre-color: #{$pre-color};
+    --#{$prefix}body-color: #{$body-color};
+    --#{$prefix}heading-color: #{$headings-color};
   }
 }
 // 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));
@@ -95,7 +95,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
@@ -49,7 +49,7 @@ $body-tertiary-bg-dark:             #414141 !default; // Boosted mod: instead of
 $body-emphasis-color-dark:          $white !default; // Boosted mod: instead of `$gray-100`
 $border-color-dark:                 $gray-700 !default;
 $border-color-translucent-dark:     $gray-700 !default; // Boosted mod instead of `rgba($white, .15)`
-$headings-color-dark:               inherit !default;
+$headings-color-dark:               $white !default; // Boosted mod: instead of `inherit`
 $link-color-dark:                   $white !default; // Boosted mod: instead of `tint-color($primary, 40%)`
 $link-hover-color-dark:             $primary !default; // Boosted mod: instead of `shift-color($link-color-dark, -$link-shade-percentage)`
 $code-color-dark:                   tint-color($code-color, 40%) !default;

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
@@ -835,7 +835,7 @@ $blockquote-line-height:      1.5 !default; // Boosted mod
 $blockquote-letter-spacing:   $letter-spacing-base * .25 !default; // Boosted mod
 
 $hr-margin-y:                 $spacer !default;
-$hr-color:                    inherit !default;
+$hr-color:                    var(--#{$prefix}heading-color) !default; // Boosted mod
 
 // fusv-disable
 $hr-bg-color:                 null !default; // Deprecated in v5.2.0
@@ -1096,12 +1096,12 @@ $input-padding-y-lg:                    $input-btn-padding-y-lg !default;
 $input-padding-x-lg:                    $input-btn-padding-x-lg !default;
 $input-font-size-lg:                    $input-btn-font-size-lg !default;
 
-$input-bg:                              var(--#{$prefix}body-bg) !default;
+$input-bg:                              $white !default; // Boosted mod: instead of `var(--#{$prefix}body-bg)`
 $input-disabled-color:                  $gray-700 !default; // Boosted mod
 $input-disabled-bg:                     var(--#{$prefix}secondary-bg) !default;
 $input-disabled-border-color:           null !default;
 
-$input-color:                           var(--#{$prefix}body-color) !default;
+$input-color:                           $black !default; // Boosted mod: instead of `var(--#{$prefix}body-color)`
 $input-border-color:                    var(--#{$prefix}border-color-translucent) !default; // Boosted mod: instead of var(--#{$prefix}border-color)
 $input-border-width:                    $input-btn-border-width !default;
 $input-box-shadow:                      none !default; // Boosted mod
@@ -1675,8 +1675,8 @@ $card-box-shadow:                   null !default;
 $card-inner-border-radius:          subtract($card-border-radius, $card-border-width) !default;
 $card-cap-padding-y:                $card-spacer-bottom * .5 !default; // Boosted mod
 $card-cap-padding-x:                $card-spacer-x !default;
-$card-cap-bg:                       var(--#{$prefix}body-color) !default; // Boosted mod: instead of `rgba(var(--#{$prefix}body-color-rgb), .03)`
-$card-cap-color:                    var(--#{$prefix}body-bg) !default; // Boosted mod: instead of `null`
+$card-cap-bg:                       $black !default; // Boosted mod: instead of `rgba(var(--#{$prefix}body-color-rgb), .03)`
+$card-cap-color:                    $white !default; // Boosted mod: instead of `null`
 $card-cap-font-weight:              $font-weight-bold !default; // Boosted mod
 $card-height:                       null !default;
 $card-color:                        null !default;

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/assets/scss/_content.scss

@@ -109,11 +109,14 @@
 
   .dropdown-menu {
     --bs-dropdown-bg: #{mix($blue-500, $blue-600)};
+    --bs-dropdown-link-color: var(--bs-white); // Boosted mod
     --bs-dropdown-link-active-bg: #{$blue-700};
+    --bs-dropdown-link-hover-color: var(--bs-white); // Boosted mod
     --bs-dropdown-link-hover-bg: #{$blue-600}; // Boosted mod
   }
 
   .btn-secondary {
+    --bs-btn-color: var(--bs-white); // Boosted mod
     --bs-btn-bg: #{mix($gray-600, $blue-400, .5)};
     --bs-btn-border-color: #{rgba($white, .25)};
     --bs-btn-hover-bg: #{darken(mix($gray-600, $blue-400, .5), 5%)};

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

@@ -475,7 +475,7 @@ You can also change the borders on the card header and footer as needed, and eve
 {{< example >}}
 <div class="card border-success mb-3" style="max-width: 18rem;">
   <div class="card-header bg-transparent border-success text-body">Header</div>
-  <div class="card-body text-success">
+  <div class="card-body">
     <h5 class="card-title">Success 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>

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

@@ -268,7 +268,7 @@ Input groups work, too. If your navbar is an entire form, or mostly a form, you
 <nav class="navbar navbar-dark bg-dark">
   <form class="container-fluid">
     <div class="input-group">
-      <span class="input-group-text" id="basic-addon1">@</span>
+      <span class="input-group-text text-white" id="basic-addon1">@</span>
       <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
     </div>
   </form>

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

@@ -148,7 +148,7 @@ If you're adding labels to progress bars with a custom background color, make su
   <div class="progress-bar bg-warning text-dark" style="width: 75%">75%</div>
 </div>
 <div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
-  <div class="progress-bar bg-danger" style="width: 100%">100%</div>
+  <div class="progress-bar text-white bg-danger" style="width: 100%">100%</div>
 </div>
 {{< /example >}}
 

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

@@ -43,16 +43,13 @@ 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">
-  <span class="visually-hidden">Loading...</span>
-</div>
 {{< /example >}}
 
 {{< example class="bg-dark" >}}
 <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 >}}
@@ -74,23 +71,20 @@ If you don't fancy a border spinner, switch to the grow spinner. While it doesn'
 </div>
 {{< /example >}}
 
-Once again, this spinner is built with `currentColor`, so you can easily change its appearance with [text color utilities][color]. Here it is in orange, along with a secondary supported variant.
+Once again, this spinner is built with `currentColor`, so you can easily change its appearance with [text color utilities][color].
 
 <!-- Boosted mod -->
 {{< example >}}
 <div class="spinner-grow text-primary" role="status">
   <span class="visually-hidden">Loading...</span>
 </div>
-<div class="spinner-grow text-secondary" role="status">
-  <span class="visually-hidden">Loading...</span>
-</div>
 {{< /example >}}
 
 {{< example class="bg-dark" >}}
 <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/content/reboot.md

@@ -130,7 +130,7 @@ Placeholder links—those without an `href`—are targeted with a more specific
 The `<hr>` element has been simplified. Similar to browser defaults, `<hr>`s are styled via `border-top`, have a default `opacity: .25`, and automatically inherit their `border-color` via `color`, including when `color` is set via the parent. They can be modified with text, border, and opacity utilities.
 
 {{< design-callout-alert >}}
-These `<hr>` 3rd and 4th variants can not be used because they do not respect the Orange Design System specifications. For the 3rd variant, it is because of its opacity. For the 4th variant, it is because of its height and its opacity.
+These `<hr>` 2nd, 3rd and 4th variants can not be used because they do not respect the Orange Design System specifications. For the 2nd variant, it is because of its color. For the 3rd variant, it is because of its opacity. For the 4th variant, it is because of its height and its opacity.
 {{< /design-callout-alert >}}
 
 {{< 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 >}}