diff options
author | Mark Otto <markd.otto@gmail.com> | 2021-08-10 17:16:48 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-08-10 17:16:48 +0300 |
commit | 612d235faf3515dacceb19df04f1d32b9ef62c55 (patch) | |
tree | 745519d0a1a79bc1d9a3b2af9d2ee1e640585364 | |
parent | fd92e353d078175074af35a94b7a237c64d6767a (diff) |
Add check to rgba-css-var function for body or bg (#34699)
-rw-r--r-- | scss/_functions.scss | 10 | ||||
-rw-r--r-- | scss/_root.scss | 3 | ||||
-rw-r--r-- | scss/_variables.scss | 26 |
3 files changed, 28 insertions, 11 deletions
diff --git a/scss/_functions.scss b/scss/_functions.scss index e00395505f..30539b3930 100644 --- a/scss/_functions.scss +++ b/scss/_functions.scss @@ -37,11 +37,17 @@ @return red($value), green($value), blue($value); } +// stylelint-disable scss/dollar-variable-pattern @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...) { $_map: (); diff --git a/scss/_root.scss b/scss/_root.scss index 189b2b3bbe..5e138e97b4 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -23,7 +23,8 @@ --#{$variable-prefix}white-rgb: #{to-rgb($white)}; --#{$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 diff --git a/scss/_variables.scss b/scss/_variables.scss index 3750fa2c23..1700f99413 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -409,23 +409,33 @@ $body-text-align: null !default; // // 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 -$utilities-colors: map-merge( - $theme-colors-rgb, +$utilities-colors: $theme-colors-rgb !default; +// scss-docs-end utilities-colors + +// scss-docs-start utilities-text-colors +$utilities-text: map-merge( + $utilities-colors, ( "black": to-rgb($black), "white": to-rgb($white), - "body": to-rgb($body-color) + "body": to-rgb($body-color) ) ) !default; -// scss-docs-end utilities-colors - -// scss-docs-start utilities-text-colors -$utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text") !default; +$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default; // scss-docs-end utilities-text-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 // Links |