root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Add check to rgba-css-var function for body or bg (#34699)

This commit is contained in:
Mark Otto 2021-08-10 07:16:48 -07:00 committed by GitHub
parent fd92e353d0
commit 612d235faf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 30 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
scss/_functions.scss
View File

@ -37,11 +37,17 @@
@return red($value), green($value), blue($value); @return red($value), green($value), blue($value);
} }
// stylelint-disable scss/dollar-variable-pattern
@function rgba-css-var($identifier, $target) { @function rgba-css-var($identifier, $target) {
@return rgba(var(--#{$variable-prefix}#{$identifier}-rgb), var(--#{$variable-prefix}#{$target}-opacity)); @if $identifier == "body" and $target == "bg" {
@return rgba(var(--#{$variable-prefix}#{$identifier}-bg-rgb), var(--#{$variable-prefix}#{$target}-opacity));
} @if $identifier == "body" and $target == "text" {
@return rgba(var(--#{$variable-prefix}#{$identifier}-color-rgb), var(--#{$variable-prefix}#{$target}-opacity));
} @else {
@return rgba(var(--#{$variable-prefix}#{$identifier}-rgb), var(--#{$variable-prefix}#{$target}-opacity));
}
} }
// stylelint-disable scss/dollar-variable-pattern
@function map-loop($map, $func, $args...) { @function map-loop($map, $func, $args...) {
$_map: (); $_map: ();

3
scss/_root.scss
View File

@ -23,7 +23,8 @@
--#{$variable-prefix}white-rgb: #{to-rgb($white)}; --#{$variable-prefix}white-rgb: #{to-rgb($white)};
--#{$variable-prefix}black-rgb: #{to-rgb($black)}; --#{$variable-prefix}black-rgb: #{to-rgb($black)};
--#{$variable-prefix}body-rgb: #{to-rgb($body-color)}; --#{$variable-prefix}body-color-rgb: #{to-rgb($body-color)};
--#{$variable-prefix}body-bg-rgb: #{to-rgb($body-bg)};
// Fonts // Fonts

30
scss/_variables.scss
View File

@ -409,23 +409,33 @@ $body-text-align: null !default;
// //
// Extends the default `$theme-colors` maps to help create our utilities. // Extends the default `$theme-colors` maps to help create our utilities.
// Come v6, we'll de-dupe these variables. Until then, for backward compatibility, we keep them to reassign.
// scss-docs-start utilities-colors // scss-docs-start utilities-colors
$utilities-colors: map-merge( $utilities-colors: $theme-colors-rgb !default;
$theme-colors-rgb,
(
"black": to-rgb($black),
"white": to-rgb($white),
"body": to-rgb($body-color)
)
) !default;
// scss-docs-end utilities-colors // scss-docs-end utilities-colors
// scss-docs-start utilities-text-colors // scss-docs-start utilities-text-colors
$utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text") !default; $utilities-text: map-merge(
$utilities-colors,
(
"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-docs-end utilities-text-colors // scss-docs-end utilities-text-colors
// scss-docs-start utilities-bg-colors // scss-docs-start utilities-bg-colors
$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg") !default; $utilities-bg: map-merge(
$utilities-colors,
(
"black": to-rgb($black),
"white": to-rgb($white),
"body": to-rgb($body-bg)
)
) !default;
$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default;
// scss-docs-end utilities-bg-colors // scss-docs-end utilities-bg-colors
// Links // Links