`rgba-css-var` only takes into account the keys

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-rgbs 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".