Unable to use overriden `$border-color` variable in bootstrap overriden application styles

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

I have a custom light and dark implementation in my application and have $border-color defined within 2 separate set of variables in light and dark. Here is the general setup of what I have in my app.scss file in the application:

html.light {
  // import my bootstrap light variable overrides
  // import bootstrap.scss
  //  import my bootstrap class overrides
}

html.dark {
  // import my bootstrap dark variable overrides
  // import bootstrap.scss
  //  import my bootstrap class overrides
}

This setup was working fine with bootstrap 5.1. However this setup does not work for $border-color in 5.2. I did some digging and found that the $border-color which is a global scope variable for bootstrap is getting redefined in .table class. Here is the link to the line in question: https://github.com/twbs/bootstrap/blob/v5.2.1/scss/mixins/_table-variants.scss#L8

This did not exist in the 5.1.3 version of bootstrap: https://github.com/twbs/bootstrap/blob/v5.1.3/scss/mixins/_table-variants.scss

Because of that redefinition, any overrides that follow the bootstrap import in the setup above are only using the redefined value for $border-color rather than using the overriden value which was the case earlier.

I also confirmed that by changing the variable name from $border-color to something like $foobar and then using that in the subsequent styles for .table class in that file, the problem is resolved.

Reduced test cases

Define the --bs-border-color CSS variable at html.light and html.dark scope level before importing bootstrap.scss which defines it on the :root pseudo and then updating all my class override based styles to use var(–bs-border-color) instead of $border-color. However this problem can be resolved by simply updating the locally scoped variable that is used within .table class from $border-color to something else.

Here is my setup that solves this issue:

html.light {
  // import my bootstrap light variable overrides
  // import mixin that defines --bs-border-color using the overriden $border-color variable
  // import bootstrap.scss
  //  import my bootstrap class overrides
}

html.dark {
  // import my bootstrap dark variable overrides
  // import mixin that defines --bs-border-color using the overriden $border-color variable
  // import bootstrap.scss
  //  import my bootstrap class overrides
}

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

Windows

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

Chrome, Firefox

What version of Bootstrap are you using?

5.2.1

[gauravshah27]

@julien-deramond Thanks a lot for putting the fix out and I tested that out and it is working as expected. Really appreciate the quick turnaround on this as this will unblock us from getting on the latest version of bootstrap. Really appreciate all the good work.

[gauravshah27]

@louismaximepiton I have forked your stackblitz here and updated it to reproduce the issue that exactly matches what I have in my application and I see the same thing that I am seeing in my application where the $border-color gets redefined by the table-variant mixin and that is what is used in subsequent classes that follow the import of bootstrap.

Inspect the border on the .side-menu and you will see that it is using #373b3e as the color for the border instead of using the #313131 which is defined as $border-color in html.dark