Reintroduce all text color utilities

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

@@ -149,6 +149,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/_maps.scss

@@ -112,13 +112,15 @@ $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),
+ "light": to-rgb($gray-500),
+ "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/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/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/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 >}}

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

@@ -8,35 +8,42 @@ aliases:
 toc: true
 ---
 
-## Accessibility
-
 {{< callout info >}}
 {{< partial "callouts/warning-color-assistive-technologies.md" >}}
 {{< /callout >}}
 
-When using `.text-*` and `.bg-*` utilities, **contrasts are locked to ensure they meet [WCAG 2.0 accessibility standards for color contrast](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)**, by defining `color` and `background-color` altogether. Please refer to [our theme colors]({{< docsref "/customize/color" >}}#all-colors) to have a full preview of Boosted color palette’s reached WCAG level.
-
 ## Colors
 
+{{< design-callout-alert >}}
+Some of the colors combinations below do not belong the Orange Design System specifications, and do not meet accessibility standards.
+
+Please refer to our [Orange's colors]({{< docsref "/utilities/colors#oranges-colors" >}}) section underneath 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 >}}
+
 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.
 
 {{< callout info >}}
 Color utilities like `.text-*` that generated from our original `$theme-colors` Sass map don't yet respond to color modes, however, any `.text-*-emphasis` utility will. This will be resolved in v6.
 {{< /callout >}}
 
-<!-- Boosted mod -->
 {{< example >}}
-<p class="text-primary">.text-primary</p>
-<p class="text-secondary">.text-secondary</p>
-<p class="text-light">.text-light</p>
+{{< colors.inline >}}
+{{- range (index $.Site.Data "theme-colors") }}
+<p class="text-{{ .name }}{{ with .contrast_color }} bg-{{ . }}{{ end }}">.text-{{ .name }}</p>
+<p class="text-{{ .name }}-emphasis">.text-{{ .name }}-emphasis</p>
+{{- end -}}
+{{< /colors.inline >}}
+
 <p class="text-body">.text-body</p>
 <p class="text-body-emphasis">.text-body-emphasis</p>
 <p class="text-body-secondary">.text-body-secondary</p>
 <p class="text-body-tertiary">.text-body-tertiary</p>
-<p class="text-black">.text-black</p>
-<p class="text-white">.text-white</p>
+
+<p class="text-black bg-white">.text-black</p>
+<p class="text-white bg-dark">.text-white</p>
+<p class="text-black-50 bg-white">.text-black-50</p>
+<p class="text-white-50 bg-dark">.text-white-50</p>
 {{< /example >}}
-<!-- End mod -->
 
 {{< callout warning >}}
 **Deprecation:** With the addition of `.text-opacity-*` utilities and CSS variables for text utilities, `.text-black-50` and `.text-white-50` are deprecated as of v5.1.0. They'll be removed in v6.0.0.
@@ -46,16 +53,56 @@ Color utilities like `.text-*` that generated from our original `$theme-colors`
 **Deprecation:** With the addition of the expanded theme colors and variables, the `.text-muted` utility has been deprecated as of v5.3.0. Its default value has also been reassigned to the new `--bs-secondary-color` CSS variable to better support color modes. It will be removed in v6.0.0.
 {{< /callout >}}
 
-{{< callout info >}}
-For each `.text-*` there is a matching `.text-*-emphasis` utility. In Boosted, they have exactly the same value so we decided not to display them in the example above so that you don't hesitate on which class to use.
+<!-- Boosted mod -->
+## Orange's colors
 
-Here is a list of these extra classes:
-{{< colors.inline >}}
-{{- range (index $.Site.Data "theme-colors") }}
-- `.text-{{ .name }}-emphasis`
-{{- end -}}
-{{< /colors.inline >}}
-{{< /callout >}}
+Bootstrap provides many `.text-*` and `.bg-*` utilities, but they should be used with care to meet our design specifications and [WCAG 2.0 accessibility standards for color contrast](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html).
+To be sure to respect the specifications, it is necessary to define `color`, `background-color` and `font-size` altogether.
+
+Thus, the `.text-primary` color on light background can only be used in a font size greater than 24px (using for example `.fs-3` utility), or 19px bold (using for example `.fs-4` and `.fw-bold` utilities).
+
+Here are some compliant combinations examples for texts:
+
+{{< example >}}
+<p class="text-primary fs-3">.text-primary</p>
+<p class="text-primary fs-4 fw-bold">.text-primary</p>
+<p class="text-primary bg-dark">.text-primary</p>
+<p class="text-secondary">.text-secondary</p>
+<p class="text-light bg-dark">.text-light</p>
+<p class="text-body">.text-body</p>
+<p class="text-body-secondary">.text-body-secondary</p>
+<p class="text-black">.text-black</p>
+<p class="text-white">.text-white</p>
+{{< /example >}}
+
+Here are some compliant combinations examples for non-texts elements, such as SVG icons:
+
+{{< example >}}
+<p class="p-2">
+ <svg width="1.875em" height="1.875em" class="text-primary" aria-hidden="true" focusable="false">
+ <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
+ </svg>
+ <svg width="1.875em" height="1.875em" class="text-success" aria-hidden="true" focusable="false">
+ <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
+ </svg>
+ <svg width="1.875em" height="1.875em" class="text-danger" aria-hidden="true" focusable="false">
+ <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#danger"/>
+ </svg>
+ <svg width="1.875em" height="1.875em" class="text-info" aria-hidden="true" focusable="false">
+ <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#info"/>
+ </svg>
+</p>
+<p class="bg-dark p-2">
+ <svg width="1.875em" height="1.875em" class="text-primary" aria-hidden="true" focusable="false">
+ <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
+ </svg>
+ <svg width="1.875em" height="1.875em" class="text-warning" aria-hidden="true" focusable="false">
+ <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#warning"/>
+ </svg>
+</p>
+{{< /example >}}
+
+<!-- End mod -->
 
 ## Opacity