Deprecation warning (passing a number without unit)

[miken32]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

Same issue as #37424 where the function is missing units, but problem is in shade-color() and tint-color() instead of opaque(). Seems like the whole codebase should be searched for any uses of mix() without units.

Deprecation Warning: $weight: Passing a number without unit % (48) is deprecated.

To preserve current behavior: $weight * 1%

More info: https://sass-lang.com/d/function-units

    ╷
212 │   @return mix(black, $color, $weight);
    │           ^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
    node_modules/bootstrap/scss/_functions.scss 212:11  shade-color()
    node_modules/bootstrap/scss/_functions.scss 217:27  shift-color()
    resources/sass/app.scss 172:12                 root stylesheet

Deprecation Warning: $weight: Passing a number without unit % (72) is deprecated.

To preserve current behavior: $weight * 1%

More info: https://sass-lang.com/d/function-units

    ╷
207 │   @return mix(white, $color, $weight);
    │           ^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
    node_modules/bootstrap/scss/_functions.scss 207:11  tint-color()
    node_modules/bootstrap/scss/_functions.scss 217:57  shift-color()
    resources/sass/app.scss 173:17                 root stylesheet

Reduced test cases

div.foo {
    color: shift-color($success, 48);
    background: shift-color($success, -72);
}

What operating system(s) are you seeing the problem on?

macOS

What browser(s) are you seeing the problem on?

No response

What version of Bootstrap are you using?

5.3.2

[julien-deramond]

Thanks for opening this issue @miken32
The fix has been done for opaque because we used 100 instead of 100% within this function and the modification was:

@function opaque($background, $foreground) {
-  @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100);
+  @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
}

For tint-color() and shade-color(), we call mix() with the same exact parameter without transforming it; for example:

@function tint-color($color, $weight) {
  @return mix(white, $color, $weight);
}

@function shade-color($color, $weight) {
  @return mix(black, $color, $weight);
}

My first feeling would be to keep that as-is. It seems more logical to have the exact same type of parameter as Sass itself.

[miken32]

So I can just update my CSS to use % and it will work? Good to know; I’ll leave it to your team to decide whether to change anything or just update documentation. Thanks for the quick reply.

[julien-deramond]

Yep, based on your example, you'll just have to use % in order to make disappear the warnings:

.foo-warnings {
  color: shift-color($success, 48);
  background: shift-color($success, -72);
}

.foo-no-warnings {
  color: shift-color($success, 48%);
  background: shift-color($success, -72%);
}

I’ll leave it to your team to decide whether to change anything or just update documentation.

This is something already mentioned in Customize > Sass > Colors with the following:

.custom-element {
  color: tint-color($primary, 10%);
}

.custom-element-2 {
  color: shade-color($danger, 30%);
}

But let's suggest a PR to add a .custom-element-3 additional example with shift-color() usage too: #39435