Passing percentage units to the global abs() function is deprecated

Hi @sime,
I have fixed this issue Passing percentage units to the global abs() function is deprecated and also attached patch,
please review and verify.

Good stuff. I just noticed this deprecation today.

Installed the patch and it removed my compiling errors.

seems to work for me

Does what it says it does.

I have created MR according to patch.

Why didn't you use recordation from compiler?
To preserve current behavior: math.abs(40%)

I see my steps to reproduce are different to the installation instructions, so I assume didn't set it up correctly?

I'm getting this warning too.

I set up gulp to trigger my sass watch. So not sure the error is due to the way I set up sass to compile or if this is a legitimate deprecation warning due to using the most recent version of sass?

Deprecation Warning: Passing percentage units to the global abs() function is deprecated.
In the future, this will emit a CSS abs() function to be resolved by the browser.
To preserve current behavior: math.abs(40%)
To emit a CSS abs() now: abs(#{40%})
More info: https://sass-lang.com/d/abs-percent

  ╷
6 │     $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));

OK I tried using math.abs() but it wasn't working until I found you need to use @use 'sass:math' at the top of the file. Not sure how to create a patch file so here's the code that works for _theme.scss:

@use 'sass:math';

@each $state, $value in $theme-colors {
  $alert-background: shift-color($value, $alert-bg-scale);
  $alert-border: shift-color($value, $alert-border-scale);
  $alert-color: shift-color($value, $alert-color-scale);
  @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
    $alert-color: mix($value, color-contrast($alert-background), math.abs($alert-color-scale));
  }
  .color-#{$state} {
    --#{$prefix}alert-color: #{$alert-color};
    --#{$prefix}alert-bg: #{$alert-color};
    --#{$prefix}alert-border-color: #{$alert-border};

    // @todo: remove .alert-link  and enable line below when 5.2 is removed.
    //--#{$prefix}alert-link-color: shade-color($alert-color, 20%);

    .alert-link {
      color: shade-color($alert-color, 20%);
    }
  }
}

stefan.korn → made their first commit to this issue’s fork.

I changed the MR to comply with #13 and take advise from #10:

Why didn't you use recordation from compiler?
To preserve current behavior: math.abs(40%)

Reverted the change in dist/bootstrap/5.2.3/scss/_alert.scss, because bootstrap itself is using this: https://github.com/twbs/bootstrap/blob/v5.2.3/scss/_alert.scss#L65 (so probably this won't get changed anymore for BS 5.2)

including patch from MR

ravi kant → changed the visibility of the branch '3391813-passing-percentage-units' to hidden.

Diff from #15 seems to do the trick - thank you!

Confirmed the MR is ready to go. This also applies to 4.0.x.