Fix deprecation warning with sass 1.56.0

[blankse]

Closes #37424

Description

With the new sass version 1.56.0 (https://github.com/sass/dart-sass/releases/tag/1.56.0) I get following deprecation warning:

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

To preserve current behavior: $weight * 1%

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

Type of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Refactoring (non-breaking change)
• Breaking change (fix or feature that would change existing functionality)

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation
• I have updated the documentation accordingly
• I have added tests to cover my changes
• All new and existing tests passed

[julien-deramond]

Thanks @blankse. We haven't bumped the dependency yet but it's gonna be useful when we'll do it :)

[AndriiTereshchuk]

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

To preserve current behavior: $weight * 1%

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

╷

201 │ @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100);
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules/bootstrap/scss/_functions.scss 201:11 opaque()
node_modules/bootstrap/scss/mixins/_table-variants.scss 4:28 table-variant()
node_modules/bootstrap/scss/_tables.scss 147:3 @import
node_modules/bootstrap/scss/bootstrap.scss 20:9 @import
resources/sass/app.scss 5:9 root stylesheet

[Janatbek]

I have sass 1.57.1, still getting same warning

[julien-deramond]

Hey @Janatbek, if so please create a new issue with all the versions used to reproduce the problem.

[blankse]

@Janatbek Which bootstrap version do you use? This bugfix is only included in the current version v5.2.3

[moltar]

I'm on 5.2.3 and I am still seeing this issue.

Deprecation Warning: $weight: Passing a number without unit % (80) 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()
    src/website/web/src/theme/variables/palette.scss 26:15  @import
    src/website/web/src/theme/variables/index.scss 1:9      @import
    src/website/web/src/theme/theme.module.scss 7:9         @import
    src/website/web/src/theme/index.scss 3:9                root stylesheet

❯ npm ls bootstrap
prj@1.0.0
└── bootstrap@5.2.3

    node_modules/bootstrap/scss/_functions.scss 207:11      tint-color()

⬇️

// scss-docs-start color-functions
// Tint a color: mix a color with white
@function tint-color($color, $weight) {
  @return mix(white, $color, $weight);
}

[moltar]

Also, the notice on GH says:

The pull request first appeared in v5.3.0-alpha1

[XhmikosR]

This was fixed in 5.2.3. If you are getting the warning, it's either your local modules or another part in your Sass.

https://github.com/twbs/bootstrap/actions/runs/3517040211/jobs/5894345876