fix(utilities): use the right orange color for texts based on the lig…

…ht/dark variant (#872)

Signed-off-by: louismaximepiton <[email protected]>
Co-authored-by: Julien Déramond <[email protected]>

scss/_root.scss

@@ -21,6 +21,7 @@
     --#{$prefix}#{$color}-rgb: #{$value};
   }
 
+  --#{$prefix}primary-text-rgb: #{to-rgb($accessible-orange)}; // Boosted mod
   --#{$prefix}white-rgb: #{to-rgb($white)};
   --#{$prefix}black-rgb: #{to-rgb($black)};
   --#{$prefix}body-color-rgb: #{to-rgb($body-color)};
@@ -84,6 +85,7 @@
 [class*="bg-black"],
 [class*="-dark"]:not(.border-dark):not(.text-dark),
 [class*="bg-secondary"] {
+  --#{$prefix}primary-text-rgb: #{to-rgb($brand-orange)};
   --#{$prefix}link-color: #{$link-color-dark};
   --#{$prefix}link-hover-color: #{$link-hover-color-dark};
   --#{$boosted-prefix}caption-color: #{$table-caption-color-dark};
@@ -96,6 +98,7 @@
 
   // stylelint-disable-next-line scss/selector-no-redundant-nesting-selector
   [class*="bg-"]:not(&):not(.bg-transparent) {
+    --#{$prefix}primary-text-rgb: #{to-rgb($accessible-orange)};
     --#{$prefix}link-color: #{$link-color};
     --#{$prefix}link-hover-color: #{$link-hover-color};
     --#{$boosted-prefix}caption-color: #{$table-caption-color};

scss/_utilities.scss

@@ -542,6 +542,7 @@ $utilities: map-merge(
           "black-50": rgba($black, .5), // deprecated
           "white-50": rgba($white, .5), // deprecated
           "reset": inherit,
+          "primary": rgba(var(--#{$prefix}primary-text-rgb), var(--#{$prefix}text-opacity)), // Boosted mod: redefine primary value
         )
       )
     ),

scss/mixins/_utilities.scss

@@ -117,7 +117,7 @@
                   }
                 }
               }
-              @if "inherit" != inspect($value) and $accessible-orange != $value and $primary != $value and $text-muted != $value {
+              @if "inherit" != inspect($value) and $accessible-orange != $value and $primary != $value and $text-muted != $value and "rgba(var(--#{$prefix}primary-text-rgb), var(--#{$prefix}text-opacity))" != $value {
                 background-color: color-contrast($value);
               }
             }

site/content/docs/5.2/migration.md

@@ -53,6 +53,7 @@ If you need more details about the changes, please refer to the [v5.2.2 release]
     <summary><span class="badge bg-success">New</span> CSS variables:</summary>
     <ul>
       <li><code>--bs-btn-letter-spacing</code></li>
+      <li><code>--bs-primary-text-rgb</code></li>
     </ul>
   </details>
 

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

@@ -48,11 +48,13 @@ Consider our default `.text-primary` utility.
 ```css
 .text-primary {
   --bs-text-opacity: 1;
-  color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
+  color: rgba(var(--bs-primary-text-rgb), var(--bs-text-opacity)) !important;
 }
 ```
 
-We use an RGB version of our `--bs-primary` (with the value of `13, 110, 253`) CSS variable and attached a second CSS variable, `--bs-text-opacity`, for the alpha transparency (with a default value `1` thanks to a local CSS variable). That means anytime you use `.text-primary` now, your computed `color` value is `rgba(13, 110, 253, 1)`. The local CSS variable inside each `.text-*` class avoids inheritance issues so nested instances of the utilities don't automatically have a modified alpha transparency.
+We use an RGB version of our `$accessible-orange` (with the value of `241, 110, 0`) Sass variable as a CSS variable and attached a second CSS variable, `--bs-text-opacity`, for the alpha transparency (with a default value `1` thanks to a local CSS variable). That means anytime you use `.text-primary` now, your computed `color` value is `rgba(241, 110, 0, 1)`. The local CSS variable inside each `.text-*` class avoids inheritance issues so nested instances of the utilities don't automatically have a modified alpha transparency.
+
+When used in a dark variant context, `--bs-primary-text-rgb` will use the value of `$brand-orange` (with the value of `255, 121, 0`).
 
 ### Example