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"
+ "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
@@ -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/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>` 2nb, 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 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 >}}

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: use `contrast_color` as background ensure a good 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 }}{{ with .contrast_color }} bg-{{ . }}{{ 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