From 5c04fbadc0aede4e237e1ee35e3da3827034d45f Mon Sep 17 00:00:00 2001 From: louismaximepiton Date: Wed, 27 Oct 2021 16:51:26 +0200 Subject: [PATCH 01/12] fix(titlesColor): Fixed Title's color Signed-off-by: louismaximepiton --- scss/_root.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/scss/_root.scss b/scss/_root.scss index e0ee619067..0f0b8563f4 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -18,7 +18,11 @@ } @each $color, $value in $theme-colors-rgb { - --#{$prefix}#{$color}-rgb: #{$value}; + @if ($color == "primary") { + --#{$variable-prefix}#{$color}-rgb: #{to-rgb($accessible-orange)}; + } @else { + --#{$variable-prefix}#{$color}-rgb: #{$value}; + } } --#{$prefix}white-rgb: #{to-rgb($white)}; From 4fc99a584dc2f688ed4fdec905384c3e0d62f943 Mon Sep 17 00:00:00 2001 From: louismaximepiton Date: Thu, 28 Oct 2021 10:46:21 +0200 Subject: [PATCH 02/12] fix(titlesColor): Corrected Background ? Signed-off-by: louismaximepiton --- scss/_utilities.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 601cde074b..c0088b0d3b 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -573,7 +573,8 @@ $utilities: map-merge( "supporting-blue": $supporting-blue, "supporting-yellow": $supporting-yellow, "supporting-pink": $supporting-pink, - "supporting-purple": $supporting-purple + "supporting-purple": $supporting-purple, + "primary": $brand-orange ) ) ), From 2a23ede1e5b811318dcd6d68a3ecc3cea42ca681 Mon Sep 17 00:00:00 2001 From: louismaximepiton Date: Fri, 29 Oct 2021 16:54:36 +0200 Subject: [PATCH 03/12] fix(titlesColor) : Solved issue ? Signed-off-by: louismaximepiton --- scss/_root.scss | 6 +----- scss/_utilities.scss | 4 ++-- 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/scss/_root.scss b/scss/_root.scss index 0f0b8563f4..0f636ac63b 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -18,11 +18,7 @@ } @each $color, $value in $theme-colors-rgb { - @if ($color == "primary") { - --#{$variable-prefix}#{$color}-rgb: #{to-rgb($accessible-orange)}; - } @else { - --#{$variable-prefix}#{$color}-rgb: #{$value}; - } + --#{$variable-prefix}#{$color}-rgb: #{$value}; } --#{$prefix}white-rgb: #{to-rgb($white)}; diff --git a/scss/_utilities.scss b/scss/_utilities.scss index c0088b0d3b..0f466dc977 100644 --- a/scss/_utilities.scss +++ b/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": $accessible-orange, ) ) ), @@ -573,8 +574,7 @@ $utilities: map-merge( "supporting-blue": $supporting-blue, "supporting-yellow": $supporting-yellow, "supporting-pink": $supporting-pink, - "supporting-purple": $supporting-purple, - "primary": $brand-orange + "supporting-purple": $supporting-purple ) ) ), From f8aacf37daa6833e0f97dbc58689ebfcc8a46de8 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Thu, 28 Apr 2022 17:27:39 +0200 Subject: [PATCH 04/12] Fixing primary utility --- scss/_utilities.scss | 2 +- scss/mixins/_utilities.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 0f466dc977..68fa19fa87 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -542,7 +542,7 @@ $utilities: map-merge( "black-50": rgba($black, .5), // deprecated "white-50": rgba($white, .5), // deprecated "reset": inherit, - "primary": $accessible-orange, + "primary": var(--#{$prefix}link-hover-color), ) ) ), diff --git a/scss/mixins/_utilities.scss b/scss/mixins/_utilities.scss index 953c73eefa..9cd6ffa502 100644 --- a/scss/mixins/_utilities.scss +++ b/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 $value != "var(--#{$prefix}link-hover-color)" { background-color: color-contrast($value); } } From c64f5aa8abb76289a787d2bba6cda9ba33c7715d Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Tue, 3 May 2022 09:55:34 +0200 Subject: [PATCH 05/12] . --- scss/_root.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/_root.scss b/scss/_root.scss index 0f636ac63b..e0ee619067 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -18,7 +18,7 @@ } @each $color, $value in $theme-colors-rgb { - --#{$variable-prefix}#{$color}-rgb: #{$value}; + --#{$prefix}#{$color}-rgb: #{$value}; } --#{$prefix}white-rgb: #{to-rgb($white)}; From 44ef23bd33e134299eb2309a1931635421865581 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Thu, 30 Jun 2022 14:01:08 +0200 Subject: [PATCH 06/12] Changing to `--bs-accessible-orange` --- scss/_root.scss | 3 +++ scss/_utilities.scss | 2 +- scss/mixins/_utilities.scss | 2 +- 3 files changed, 5 insertions(+), 2 deletions(-) diff --git a/scss/_root.scss b/scss/_root.scss index e0ee619067..4d6004cafd 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -21,6 +21,7 @@ --#{$prefix}#{$color}-rgb: #{$value}; } + --#{$prefix}accessible-orange: #{$accessible-orange}; // Boosted mod --#{$prefix}white-rgb: #{to-rgb($white)}; --#{$prefix}black-rgb: #{to-rgb($black)}; --#{$prefix}body-color-rgb: #{to-rgb($body-color)}; @@ -81,6 +82,7 @@ // Boosted mod [class*="-dark"], .bg-secondary { + --#{$prefix}accessible-orange: #{$brand-orange}; --#{$prefix}link-color: #{$link-color-dark}; --#{$prefix}link-hover-color: #{$link-hover-color-dark}; --#{$boosted-prefix}caption-color: #{$table-caption-color-dark}; @@ -91,6 +93,7 @@ // stylelint-disable-next-line scss/selector-no-redundant-nesting-selector [class*="bg-"]:not(&):not(.bg-transparent) { + --#{$prefix}accessible-orange: #{$accessible-orange}; --#{$prefix}link-color: #{$link-color}; --#{$prefix}link-hover-color: #{$link-hover-color}; --#{$boosted-prefix}caption-color: #{$table-caption-color}; diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 68fa19fa87..b5b6d3046b 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -542,7 +542,7 @@ $utilities: map-merge( "black-50": rgba($black, .5), // deprecated "white-50": rgba($white, .5), // deprecated "reset": inherit, - "primary": var(--#{$prefix}link-hover-color), + "primary": var(--#{$prefix}accessible-orange), ) ) ), diff --git a/scss/mixins/_utilities.scss b/scss/mixins/_utilities.scss index 9cd6ffa502..da97e1e6f6 100644 --- a/scss/mixins/_utilities.scss +++ b/scss/mixins/_utilities.scss @@ -117,7 +117,7 @@ } } } - @if "inherit" != inspect($value) and $accessible-orange != $value and $primary != $value and $text-muted != $value and $value != "var(--#{$prefix}link-hover-color)" { + @if "inherit" != inspect($value) and $accessible-orange != $value and $primary != $value and $text-muted != $value and $value != "var(--#{$prefix}accessible-orange)" { background-color: color-contrast($value); } } From bbb902edee70bb9b97f85d0196ef7bfc88400bef Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Tue, 15 Nov 2022 14:52:14 +0100 Subject: [PATCH 07/12] Changing variable name --- scss/_root.scss | 6 +++--- scss/_utilities.scss | 2 +- scss/mixins/_utilities.scss | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/scss/_root.scss b/scss/_root.scss index af6f72cfde..2a2848e413 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -21,7 +21,7 @@ --#{$prefix}#{$color}-rgb: #{$value}; } - --#{$prefix}accessible-orange: #{$accessible-orange}; // Boosted mod + --#{$prefix}primary-text: #{$accessible-orange}; // Boosted mod --#{$prefix}white-rgb: #{to-rgb($white)}; --#{$prefix}black-rgb: #{to-rgb($black)}; --#{$prefix}body-color-rgb: #{to-rgb($body-color)}; @@ -85,7 +85,7 @@ [class*="bg-black"], [class*="-dark"]:not(.border-dark):not(.text-dark), [class*="bg-secondary"] { - --#{$prefix}accessible-orange: #{$brand-orange}; + --#{$prefix}primary-text: #{$brand-orange}; --#{$prefix}link-color: #{$link-color-dark}; --#{$prefix}link-hover-color: #{$link-hover-color-dark}; --#{$boosted-prefix}caption-color: #{$table-caption-color-dark}; @@ -98,7 +98,7 @@ // stylelint-disable-next-line scss/selector-no-redundant-nesting-selector [class*="bg-"]:not(&):not(.bg-transparent) { - --#{$prefix}accessible-orange: #{$accessible-orange}; + --#{$prefix}primary-text: #{$accessible-orange}; --#{$prefix}link-color: #{$link-color}; --#{$prefix}link-hover-color: #{$link-hover-color}; --#{$boosted-prefix}caption-color: #{$table-caption-color}; diff --git a/scss/_utilities.scss b/scss/_utilities.scss index b5b6d3046b..47d2d138ac 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -542,7 +542,7 @@ $utilities: map-merge( "black-50": rgba($black, .5), // deprecated "white-50": rgba($white, .5), // deprecated "reset": inherit, - "primary": var(--#{$prefix}accessible-orange), + "primary": var(--#{$prefix}primary-text), ) ) ), diff --git a/scss/mixins/_utilities.scss b/scss/mixins/_utilities.scss index 1751dab6de..d5ab9da8d8 100644 --- a/scss/mixins/_utilities.scss +++ b/scss/mixins/_utilities.scss @@ -117,7 +117,7 @@ } } } - @if "inherit" != inspect($value) and $accessible-orange != $value and $primary != $value and $text-muted != $value and $value != "var(--#{$prefix}accessible-orange)" { + @if "inherit" != inspect($value) and $accessible-orange != $value and $primary != $value and $text-muted != $value and "var(--#{$prefix}primary-text)" != $value { background-color: color-contrast($value); } } From 1b61a2de29cb6d35202e1c6fc3a8d238cf3855d9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Wed, 16 Nov 2022 08:33:11 +0100 Subject: [PATCH 08/12] Add Boosted mod + add a note in the migration guide --- scss/_utilities.scss | 2 +- site/content/docs/5.2/migration.md | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 47d2d138ac..25f451abc7 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -542,7 +542,7 @@ $utilities: map-merge( "black-50": rgba($black, .5), // deprecated "white-50": rgba($white, .5), // deprecated "reset": inherit, - "primary": var(--#{$prefix}primary-text), + "primary": var(--#{$prefix}primary-text), // Boosted mod: redefine primary value ) ) ), diff --git a/site/content/docs/5.2/migration.md b/site/content/docs/5.2/migration.md index 7aad98a6a5..d0b2004c13 100644 --- a/site/content/docs/5.2/migration.md +++ b/site/content/docs/5.2/migration.md @@ -41,6 +41,7 @@ If you need more details about the changes, please refer to the [v5.2.2 release] New CSS variables:
  • --bs-btn-letter-spacing
    • +
  • --bs-primary-text
From d3873b6870cc829e04a964e4361d7d576f63fcea Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Wed, 23 Nov 2022 09:02:16 +0100 Subject: [PATCH 09/12] fix(review) --- scss/_root.scss | 6 +++--- scss/_utilities.scss | 2 +- scss/mixins/_utilities.scss | 6 ++++-- 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/scss/_root.scss b/scss/_root.scss index 2a2848e413..8118d9acfe 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -21,7 +21,7 @@ --#{$prefix}#{$color}-rgb: #{$value}; } - --#{$prefix}primary-text: #{$accessible-orange}; // Boosted mod + --#{$prefix}primary-text: #{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)}; @@ -85,7 +85,7 @@ [class*="bg-black"], [class*="-dark"]:not(.border-dark):not(.text-dark), [class*="bg-secondary"] { - --#{$prefix}primary-text: #{$brand-orange}; + --#{$prefix}primary-text: #{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}; @@ -98,7 +98,7 @@ // stylelint-disable-next-line scss/selector-no-redundant-nesting-selector [class*="bg-"]:not(&):not(.bg-transparent) { - --#{$prefix}primary-text: #{$accessible-orange}; + --#{$prefix}primary-text: #{to-rgb($accessible-orange)}; --#{$prefix}link-color: #{$link-color}; --#{$prefix}link-hover-color: #{$link-hover-color}; --#{$boosted-prefix}caption-color: #{$table-caption-color}; diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 25f451abc7..1ed1ceccdd 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -542,7 +542,7 @@ $utilities: map-merge( "black-50": rgba($black, .5), // deprecated "white-50": rgba($white, .5), // deprecated "reset": inherit, - "primary": var(--#{$prefix}primary-text), // Boosted mod: redefine primary value + "primary": rgba(var(--#{$prefix}primary-text), var(--#{$prefix}text-opacity)), // Boosted mod: redefine primary value ) ) ), diff --git a/scss/mixins/_utilities.scss b/scss/mixins/_utilities.scss index d5ab9da8d8..d3f5d6b5f6 100644 --- a/scss/mixins/_utilities.scss +++ b/scss/mixins/_utilities.scss @@ -4,7 +4,9 @@ $rgba-string-index-before-color-name: str-index($value, $func-prefix); @if $rgba-string-index-before-color-name == 1 { $rgba-string-index-after-color-name: str-index($value, "-rgb"); - @return str-slice($value, $rgba-string-index-before-color-name + str-length($func-prefix), $rgba-string-index-after-color-name - 1); + @if type-of($rgba-string-index-after-color-name) == "number" { + @return str-slice($value, $rgba-string-index-before-color-name + str-length($func-prefix), $rgba-string-index-after-color-name - 1); + } } @return undefined; } @@ -117,7 +119,7 @@ } } } - @if "inherit" != inspect($value) and $accessible-orange != $value and $primary != $value and $text-muted != $value and "var(--#{$prefix}primary-text)" != $value { + @if "inherit" != inspect($value) and $accessible-orange != $value and $primary != $value and $text-muted != $value and "rgba(var(--#{$prefix}primary-text), var(--#{$prefix}text-opacity))" != $value { background-color: color-contrast($value); } } From 95e0b35fc7e27b9213ae80934089734818d7d232 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Wed, 23 Nov 2022 10:12:31 +0100 Subject: [PATCH 10/12] Add -rgb --- scss/_root.scss | 6 +++--- scss/_utilities.scss | 2 +- scss/mixins/_utilities.scss | 6 ++---- site/content/docs/5.2/migration.md | 2 +- 4 files changed, 7 insertions(+), 9 deletions(-) diff --git a/scss/_root.scss b/scss/_root.scss index 8118d9acfe..296b23e5af 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -21,7 +21,7 @@ --#{$prefix}#{$color}-rgb: #{$value}; } - --#{$prefix}primary-text: #{to-rgb($accessible-orange)}; // Boosted mod + --#{$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)}; @@ -85,7 +85,7 @@ [class*="bg-black"], [class*="-dark"]:not(.border-dark):not(.text-dark), [class*="bg-secondary"] { - --#{$prefix}primary-text: #{to-rgb($brand-orange)}; + --#{$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}; @@ -98,7 +98,7 @@ // stylelint-disable-next-line scss/selector-no-redundant-nesting-selector [class*="bg-"]:not(&):not(.bg-transparent) { - --#{$prefix}primary-text: #{to-rgb($accessible-orange)}; + --#{$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}; diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 1ed1ceccdd..8d4e6cc9c4 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -542,7 +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), var(--#{$prefix}text-opacity)), // Boosted mod: redefine primary value + "primary": rgba(var(--#{$prefix}primary-text-rgb), var(--#{$prefix}text-opacity)), // Boosted mod: redefine primary value ) ) ), diff --git a/scss/mixins/_utilities.scss b/scss/mixins/_utilities.scss index d3f5d6b5f6..e83466422c 100644 --- a/scss/mixins/_utilities.scss +++ b/scss/mixins/_utilities.scss @@ -4,9 +4,7 @@ $rgba-string-index-before-color-name: str-index($value, $func-prefix); @if $rgba-string-index-before-color-name == 1 { $rgba-string-index-after-color-name: str-index($value, "-rgb"); - @if type-of($rgba-string-index-after-color-name) == "number" { - @return str-slice($value, $rgba-string-index-before-color-name + str-length($func-prefix), $rgba-string-index-after-color-name - 1); - } + @return str-slice($value, $rgba-string-index-before-color-name + str-length($func-prefix), $rgba-string-index-after-color-name - 1); } @return undefined; } @@ -119,7 +117,7 @@ } } } - @if "inherit" != inspect($value) and $accessible-orange != $value and $primary != $value and $text-muted != $value and "rgba(var(--#{$prefix}primary-text), var(--#{$prefix}text-opacity))" != $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); } } diff --git a/site/content/docs/5.2/migration.md b/site/content/docs/5.2/migration.md index ccdc3292cd..ef21a9a680 100644 --- a/site/content/docs/5.2/migration.md +++ b/site/content/docs/5.2/migration.md @@ -53,7 +53,7 @@ If you need more details about the changes, please refer to the [v5.2.2 release] New CSS variables:
  • --bs-btn-letter-spacing
    • -
  • --bs-primary-text
    • +
  • --bs-primary-text-rgb
From 7d30bc4cfd540cfc8d82b3347bf972d90100037b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Wed, 23 Nov 2022 11:42:52 +0100 Subject: [PATCH 11/12] Change doc explanation --- site/content/docs/5.2/utilities/colors.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/content/docs/5.2/utilities/colors.md b/site/content/docs/5.2/utilities/colors.md index c7d94bb372..302ac8a8f2 100644 --- a/site/content/docs/5.2/utilities/colors.md +++ b/site/content/docs/5.2/utilities/colors.md @@ -48,11 +48,11 @@ 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. ### Example From 2eb37943a92f4d8f379a3a302e0bcaa086a8c84f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Wed, 23 Nov 2022 11:49:19 +0100 Subject: [PATCH 12/12] Add dark variant precision --- site/content/docs/5.2/utilities/colors.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/site/content/docs/5.2/utilities/colors.md b/site/content/docs/5.2/utilities/colors.md index 302ac8a8f2..626a8f9d19 100644 --- a/site/content/docs/5.2/utilities/colors.md +++ b/site/content/docs/5.2/utilities/colors.md @@ -54,6 +54,8 @@ Consider our default `.text-primary` utility. 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 To change that opacity, override `--bs-text-opacity` via custom styles or inline styles.