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

Created by: gauravshah27

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