Add check to rgba-css-var function for body or bg (#34699)
This commit is contained in:
parent
fd92e353d0
commit
612d235faf
|
@ -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: ();
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in New Issue