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