From a4db90ff70b0957755ae4870281c318668307c65 Mon Sep 17 00:00:00 2001 From: Cameron Hollis Date: Wed, 14 Jun 2023 12:32:59 -0400 Subject: [PATCH 1/3] #38769 text-bg-primary now respects --bs-primary color --- dist/css/bootstrap-utilities.css | 16 ++++++++-------- dist/css/bootstrap-utilities.rtl.css | 16 ++++++++-------- dist/css/bootstrap.css | 16 ++++++++-------- dist/css/bootstrap.rtl.css | 16 ++++++++-------- 4 files changed, 32 insertions(+), 32 deletions(-) diff --git a/dist/css/bootstrap-utilities.css b/dist/css/bootstrap-utilities.css index 31ad0ed02c23..95704e4fd860 100644 --- a/dist/css/bootstrap-utilities.css +++ b/dist/css/bootstrap-utilities.css @@ -185,42 +185,42 @@ .text-bg-primary { color: #fff !important; - background-color: RGBA(13, 110, 253, var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important; } .text-bg-secondary { color: #fff !important; - background-color: RGBA(108, 117, 125, var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(var(--bs-secondary-rgb), var(--bs-bg-opacity, 1)) !important; } .text-bg-success { color: #fff !important; - background-color: RGBA(25, 135, 84, var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(var(--bs-success-rgb), var(--bs-bg-opacity, 1)) !important; } .text-bg-info { color: #000 !important; - background-color: RGBA(13, 202, 240, var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(var(--bs-info-rgb), var(--bs-bg-opacity, 1)) !important; } .text-bg-warning { color: #000 !important; - background-color: RGBA(255, 193, 7, var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(var(--bs-warning-rgb), var(--bs-bg-opacity, 1)) !important; } .text-bg-danger { color: #fff !important; - background-color: RGBA(220, 53, 69, var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(var(--bs-danger-rgb), var(--bs-bg-opacity, 1)) !important; } .text-bg-light { color: #000 !important; - background-color: RGBA(248, 249, 250, var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(var(--bs-light-rgb), var(--bs-bg-opacity, 1)) !important; } .text-bg-dark { color: #fff !important; - background-color: RGBA(33, 37, 41, var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(var(--bs-dark-rgb), var(--bs-bg-opacity, 1)) !important; } .link-primary { diff --git a/dist/css/bootstrap-utilities.rtl.css b/dist/css/bootstrap-utilities.rtl.css index d99b970f6bf1..8c62e0f39686 100644 --- a/dist/css/bootstrap-utilities.rtl.css +++ b/dist/css/bootstrap-utilities.rtl.css @@ -185,42 +185,42 @@ .text-bg-primary { color: #fff !important; - background-color: RGBA(13, 110, 253, var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important; } .text-bg-secondary { color: #fff !important; - background-color: RGBA(108, 117, 125, var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(var(--bs-secondary-rgb), var(--bs-bg-opacity, 1)) !important; } .text-bg-success { color: #fff !important; - background-color: RGBA(25, 135, 84, var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(var(--bs-success-rgb), var(--bs-bg-opacity, 1)) !important; } .text-bg-info { color: #000 !important; - background-color: RGBA(13, 202, 240, var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(var(--bs-info-rgb), var(--bs-bg-opacity, 1)) !important; } .text-bg-warning { color: #000 !important; - background-color: RGBA(255, 193, 7, var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(var(--bs-warning-rgb), var(--bs-bg-opacity, 1)) !important; } .text-bg-danger { color: #fff !important; - background-color: RGBA(220, 53, 69, var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(var(--bs-danger-rgb), var(--bs-bg-opacity, 1)) !important; } .text-bg-light { color: #000 !important; - background-color: RGBA(248, 249, 250, var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(var(--bs-light-rgb), var(--bs-bg-opacity, 1)) !important; } .text-bg-dark { color: #fff !important; - background-color: RGBA(33, 37, 41, var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(var(--bs-dark-rgb), var(--bs-bg-opacity, 1)) !important; } .link-primary { diff --git a/dist/css/bootstrap.css b/dist/css/bootstrap.css index 2aecff75e3d6..7d194d848876 100644 --- a/dist/css/bootstrap.css +++ b/dist/css/bootstrap.css @@ -6857,42 +6857,42 @@ textarea.form-control-lg { .text-bg-primary { color: #fff !important; - background-color: RGBA(13, 110, 253, var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important; } .text-bg-secondary { color: #fff !important; - background-color: RGBA(108, 117, 125, var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(var(--bs-secondary-rgb), var(--bs-bg-opacity, 1)) !important; } .text-bg-success { color: #fff !important; - background-color: RGBA(25, 135, 84, var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(var(--bs-success-rgb), var(--bs-bg-opacity, 1)) !important; } .text-bg-info { color: #000 !important; - background-color: RGBA(13, 202, 240, var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(var(--bs-info-rgb), var(--bs-bg-opacity, 1)) !important; } .text-bg-warning { color: #000 !important; - background-color: RGBA(255, 193, 7, var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(var(--bs-warning-rgb), var(--bs-bg-opacity, 1)) !important; } .text-bg-danger { color: #fff !important; - background-color: RGBA(220, 53, 69, var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(var(--bs-danger-rgb), var(--bs-bg-opacity, 1)) !important; } .text-bg-light { color: #000 !important; - background-color: RGBA(248, 249, 250, var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(var(--bs-light-rgb), var(--bs-bg-opacity, 1)) !important; } .text-bg-dark { color: #fff !important; - background-color: RGBA(33, 37, 41, var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(var(--bs-dark-rgb), var(--bs-bg-opacity, 1)) !important; } .link-primary { diff --git a/dist/css/bootstrap.rtl.css b/dist/css/bootstrap.rtl.css index 94f80e5ee8d1..95d0c1cf180c 100644 --- a/dist/css/bootstrap.rtl.css +++ b/dist/css/bootstrap.rtl.css @@ -6830,42 +6830,42 @@ textarea.form-control-lg { .text-bg-primary { color: #fff !important; - background-color: RGBA(13, 110, 253, var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important; } .text-bg-secondary { color: #fff !important; - background-color: RGBA(108, 117, 125, var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(var(--bs-secondary-rgb), var(--bs-bg-opacity, 1)) !important; } .text-bg-success { color: #fff !important; - background-color: RGBA(25, 135, 84, var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(var(--bs-success-rgb), var(--bs-bg-opacity, 1)) !important; } .text-bg-info { color: #000 !important; - background-color: RGBA(13, 202, 240, var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(var(--bs-info-rgb), var(--bs-bg-opacity, 1)) !important; } .text-bg-warning { color: #000 !important; - background-color: RGBA(255, 193, 7, var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(var(--bs-warning-rgb), var(--bs-bg-opacity, 1)) !important; } .text-bg-danger { color: #fff !important; - background-color: RGBA(220, 53, 69, var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(var(--bs-danger-rgb), var(--bs-bg-opacity, 1)) !important; } .text-bg-light { color: #000 !important; - background-color: RGBA(248, 249, 250, var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(var(--bs-light-rgb), var(--bs-bg-opacity, 1)) !important; } .text-bg-dark { color: #fff !important; - background-color: RGBA(33, 37, 41, var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(var(--bs-dark-rgb), var(--bs-bg-opacity, 1)) !important; } .link-primary { From 55160392a58d712a3907b32f84cd6267d5b4179e Mon Sep 17 00:00:00 2001 From: Cameron Hollis Date: Wed, 14 Jun 2023 15:23:41 -0400 Subject: [PATCH 2/3] Revert "#38769 text-bg-primary now respects --bs-primary color" This reverts commit a4db90ff70b0957755ae4870281c318668307c65. --- dist/css/bootstrap-utilities.css | 16 ++++++++-------- dist/css/bootstrap-utilities.rtl.css | 16 ++++++++-------- dist/css/bootstrap.css | 16 ++++++++-------- dist/css/bootstrap.rtl.css | 16 ++++++++-------- 4 files changed, 32 insertions(+), 32 deletions(-) diff --git a/dist/css/bootstrap-utilities.css b/dist/css/bootstrap-utilities.css index 95704e4fd860..31ad0ed02c23 100644 --- a/dist/css/bootstrap-utilities.css +++ b/dist/css/bootstrap-utilities.css @@ -185,42 +185,42 @@ .text-bg-primary { color: #fff !important; - background-color: RGBA(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(13, 110, 253, var(--bs-bg-opacity, 1)) !important; } .text-bg-secondary { color: #fff !important; - background-color: RGBA(var(--bs-secondary-rgb), var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(108, 117, 125, var(--bs-bg-opacity, 1)) !important; } .text-bg-success { color: #fff !important; - background-color: RGBA(var(--bs-success-rgb), var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(25, 135, 84, var(--bs-bg-opacity, 1)) !important; } .text-bg-info { color: #000 !important; - background-color: RGBA(var(--bs-info-rgb), var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(13, 202, 240, var(--bs-bg-opacity, 1)) !important; } .text-bg-warning { color: #000 !important; - background-color: RGBA(var(--bs-warning-rgb), var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(255, 193, 7, var(--bs-bg-opacity, 1)) !important; } .text-bg-danger { color: #fff !important; - background-color: RGBA(var(--bs-danger-rgb), var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(220, 53, 69, var(--bs-bg-opacity, 1)) !important; } .text-bg-light { color: #000 !important; - background-color: RGBA(var(--bs-light-rgb), var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(248, 249, 250, var(--bs-bg-opacity, 1)) !important; } .text-bg-dark { color: #fff !important; - background-color: RGBA(var(--bs-dark-rgb), var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(33, 37, 41, var(--bs-bg-opacity, 1)) !important; } .link-primary { diff --git a/dist/css/bootstrap-utilities.rtl.css b/dist/css/bootstrap-utilities.rtl.css index 8c62e0f39686..d99b970f6bf1 100644 --- a/dist/css/bootstrap-utilities.rtl.css +++ b/dist/css/bootstrap-utilities.rtl.css @@ -185,42 +185,42 @@ .text-bg-primary { color: #fff !important; - background-color: RGBA(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(13, 110, 253, var(--bs-bg-opacity, 1)) !important; } .text-bg-secondary { color: #fff !important; - background-color: RGBA(var(--bs-secondary-rgb), var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(108, 117, 125, var(--bs-bg-opacity, 1)) !important; } .text-bg-success { color: #fff !important; - background-color: RGBA(var(--bs-success-rgb), var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(25, 135, 84, var(--bs-bg-opacity, 1)) !important; } .text-bg-info { color: #000 !important; - background-color: RGBA(var(--bs-info-rgb), var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(13, 202, 240, var(--bs-bg-opacity, 1)) !important; } .text-bg-warning { color: #000 !important; - background-color: RGBA(var(--bs-warning-rgb), var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(255, 193, 7, var(--bs-bg-opacity, 1)) !important; } .text-bg-danger { color: #fff !important; - background-color: RGBA(var(--bs-danger-rgb), var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(220, 53, 69, var(--bs-bg-opacity, 1)) !important; } .text-bg-light { color: #000 !important; - background-color: RGBA(var(--bs-light-rgb), var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(248, 249, 250, var(--bs-bg-opacity, 1)) !important; } .text-bg-dark { color: #fff !important; - background-color: RGBA(var(--bs-dark-rgb), var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(33, 37, 41, var(--bs-bg-opacity, 1)) !important; } .link-primary { diff --git a/dist/css/bootstrap.css b/dist/css/bootstrap.css index 7d194d848876..2aecff75e3d6 100644 --- a/dist/css/bootstrap.css +++ b/dist/css/bootstrap.css @@ -6857,42 +6857,42 @@ textarea.form-control-lg { .text-bg-primary { color: #fff !important; - background-color: RGBA(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(13, 110, 253, var(--bs-bg-opacity, 1)) !important; } .text-bg-secondary { color: #fff !important; - background-color: RGBA(var(--bs-secondary-rgb), var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(108, 117, 125, var(--bs-bg-opacity, 1)) !important; } .text-bg-success { color: #fff !important; - background-color: RGBA(var(--bs-success-rgb), var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(25, 135, 84, var(--bs-bg-opacity, 1)) !important; } .text-bg-info { color: #000 !important; - background-color: RGBA(var(--bs-info-rgb), var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(13, 202, 240, var(--bs-bg-opacity, 1)) !important; } .text-bg-warning { color: #000 !important; - background-color: RGBA(var(--bs-warning-rgb), var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(255, 193, 7, var(--bs-bg-opacity, 1)) !important; } .text-bg-danger { color: #fff !important; - background-color: RGBA(var(--bs-danger-rgb), var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(220, 53, 69, var(--bs-bg-opacity, 1)) !important; } .text-bg-light { color: #000 !important; - background-color: RGBA(var(--bs-light-rgb), var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(248, 249, 250, var(--bs-bg-opacity, 1)) !important; } .text-bg-dark { color: #fff !important; - background-color: RGBA(var(--bs-dark-rgb), var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(33, 37, 41, var(--bs-bg-opacity, 1)) !important; } .link-primary { diff --git a/dist/css/bootstrap.rtl.css b/dist/css/bootstrap.rtl.css index 95d0c1cf180c..94f80e5ee8d1 100644 --- a/dist/css/bootstrap.rtl.css +++ b/dist/css/bootstrap.rtl.css @@ -6830,42 +6830,42 @@ textarea.form-control-lg { .text-bg-primary { color: #fff !important; - background-color: RGBA(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(13, 110, 253, var(--bs-bg-opacity, 1)) !important; } .text-bg-secondary { color: #fff !important; - background-color: RGBA(var(--bs-secondary-rgb), var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(108, 117, 125, var(--bs-bg-opacity, 1)) !important; } .text-bg-success { color: #fff !important; - background-color: RGBA(var(--bs-success-rgb), var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(25, 135, 84, var(--bs-bg-opacity, 1)) !important; } .text-bg-info { color: #000 !important; - background-color: RGBA(var(--bs-info-rgb), var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(13, 202, 240, var(--bs-bg-opacity, 1)) !important; } .text-bg-warning { color: #000 !important; - background-color: RGBA(var(--bs-warning-rgb), var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(255, 193, 7, var(--bs-bg-opacity, 1)) !important; } .text-bg-danger { color: #fff !important; - background-color: RGBA(var(--bs-danger-rgb), var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(220, 53, 69, var(--bs-bg-opacity, 1)) !important; } .text-bg-light { color: #000 !important; - background-color: RGBA(var(--bs-light-rgb), var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(248, 249, 250, var(--bs-bg-opacity, 1)) !important; } .text-bg-dark { color: #fff !important; - background-color: RGBA(var(--bs-dark-rgb), var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(33, 37, 41, var(--bs-bg-opacity, 1)) !important; } .link-primary { From 262de956939cbc655cd53577d60a5bfb7eaecfbf Mon Sep 17 00:00:00 2001 From: Cameron Hollis Date: Wed, 14 Jun 2023 15:54:40 -0400 Subject: [PATCH 3/3] #38769 updated scss file to respect --bs-primary color with text-bg-primary class --- scss/helpers/_color-bg.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/scss/helpers/_color-bg.scss b/scss/helpers/_color-bg.scss index c00acde5c07d..1a3a4cffd656 100644 --- a/scss/helpers/_color-bg.scss +++ b/scss/helpers/_color-bg.scss @@ -1,8 +1,7 @@ // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251 @each $color, $value in $theme-colors { - $color-rgb: to-rgb($value); .text-bg-#{$color} { color: color-contrast($value) if($enable-important-utilities, !important, null); - background-color: RGBA($color-rgb, var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null); + background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null); } }