This PR is more an issue than a PR but the Netlify deployment will help to understand it. We tried few things but we would like to have your thoughts about it as well :) I already talked about it a little bit with @ffoodd.
Before
Some recent PRs created _map.scss
and so $utilities-text-colors
, $utilities-bg-colors
and $utilities-border-colors
. This new system doesn't contain any regressions for a Bootstrap user but we have spotted a limitation.
Let's take a look at how the border colors were created:
"border-color": (
property: border-color,
class: border,
values: map-merge($theme-colors, ("white": $white))
),
At that time it was possible to change the value associated with "white". For example you could do the following and the .border-white
would display a yellow border:
"border-color": (
property: border-color,
class: border,
values: map-merge($theme-colors, ("white": $warning))
),
Now
The new system in _maps.scss
is a little bit different but seems very close:
$utilities-border: map-merge(
$utilities-colors,
(
"white": to-rgb($white)
)
) !default;
$utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$key", "border") !default;
But if you try to modify the value associated with "white", it doesn't do anything:
$utilities-border: map-merge(
$utilities-colors,
(
"white": to-rgb($warning)
)
) !default;
$utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$key", "border") !default;
It can be seen here where I try to change to "white" value to have a yellow background displayed with a bg-white
. It stays white because of var(--bs-white-rgb)
.
Why?
The explanation seems to come from rgba-css-var
that in fact only uses the key (in fact --bs-{key-name}-rgb
) and not the value.
It means that you could do:
$utilities-border: map-merge(
$utilities-colors,
(
"white": null
)
) !default;
$utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$key", "border") !default;
Only matters the fact that the key is added to the map-merge
.
It can be seen here where I set a null
value to the "body" key and it still works; var(--bs-body-bg-rgb)
is used.
Impact and bypass
In Boosted, we used this possibility to change the value for a given key. In this PR, one of the solution find to retrieve this same behavior was to add an extra parameter to rgba-css-var
to provide the modified value:
// _maps.scss
$utilities-border: map-merge(
$utilities-colors,
(
"white": "warning",
"body": "danger"
)
) !default;
$utilities-border-colors: map-loop($utilities-border, rgba-css-var-with-value, "$key", "border", "$value") !default;
// _utilities.scss
@function rgba-css-var-with-value($identifier, $target, $value: null) {
@if ($identifier == "body" or $identifier == "white") and $target == "bg" {
@return rgba(var(--#{$variable-prefix}#{$identifier}-rgb), var(--#{$variable-prefix}#{$target}-opacity));
} @else if ($identifier == "body" or $identifier == "white") and $target == "text" {
@return rgba(var(--#{$variable-prefix}#{$identifier}-rgb), var(--#{$variable-prefix}#{$target}-opacity));
// Example of using $value for border colors redefinitions
} @else if ($identifier == "body" or $identifier == "white") and $target == "border" {
@return rgba(var(--#{$variable-prefix}#{$value}-rgb), var(--#{$variable-prefix}#{$target}-opacity));
} @else {
@return rgba(var(--#{$variable-prefix}#{$identifier}-rgb), var(--#{$variable-prefix}#{$target}-opacity));
}
}
The result can be seen here where .border-white
displays a yellow border.
It is kinda ugly and it doesn't work combined to the opacities.
Other solutions
@louismaximepiton tried 2 other different approaches.
First solution
This solution adds more CSS variables; maybe too much (bundle will be bigger).
To try it, please uncomment scss/_functions.scss
and scss_root.scss
what is between "First solution start" and "Solutions proposal end".
Second solution
This version gets rid of to-rgb
s in _maps.scss
and use the value but we don't like this version too much because CSS variables wouldn't be used anymore.
To try it, please uncomment scss/_functions.scss
and scss/_maps.scss
what is between "Second solution start" and "Solutions proposal end".