Missing `--bs-card-color` CSS variable in Bootstrap v5.3.0

[kosyachniy]

Prerequisites

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

Describe the issue

Upon upgrading to Bootstrap v5.3.0 from v5.2.0, the CSS variable --bs-card-color appears to be no longer defined. This variable was being utilized to style certain components within the project, and its absence is now resulting in visual discrepancies. The documentation and changes in the new version do not seem to indicate any details about the removal or possible replacement of this variable.

The disappearance of this variable has specifically affected the day and night themes on the website - the text is consistently black regardless of the theme. Here is the error message that occurs:

Error: --bs-card-color is not defined

Could clarification be provided as to why this variable was removed or if it was replaced with another variable? If this is an oversight, it would be appreciated if it could be addressed in the upcoming release.

Reduced test cases

The problem manifests when toggling the website theme from day to night. Specifically, the text within the Card component retains its black color instead of changing to an appropriate color for the night theme, thus making it practically invisible against the dark background.

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

macOS

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

Chrome

What version of Bootstrap are you using?

^5.2.3

[julien-deramond]

Thanks for submitting this issue @kosyachniy There's no change between v5.2.0 and v5.2.3 regarding --bs-card-color. If you search this pattern in https://github.com/twbs/bootstrap/blob/v5.2.0/dist/css/bootstrap.css and https://github.com/twbs/bootstrap/blob/v5.3.0/dist/css/bootstrap.css, it's the same definition and usage.

IDK the code of this project but you could try something like this just to see if it changes anything:

.card {
  --bs-card-color: var(--bs-body-color);
}

[kosyachniy]

But anyway on the site with examples (https://getbootstrap.com/docs/5.2/components/card/) the same error:

So, examples dont work

[kosyachniy]

@julien-deramond

--bs-card-color: var(--bs-body-color);

But bs-body-color doesnt depend on themes (bg-dark, bg-color, ...)

[ffoodd]

Could be a use case for fallback value in var(), couldn't it?

[julien-deramond]

Could be a use case for fallback value in var(), couldn't it?

I haven't checked the specific use case of this issue yet but it could yeah.

More globally in the framework, I'm wondering if we shouldn't define color: var(--bs-body-color) at the root level in dark mode (which I think is not the case right now). It would probably allow us to keep the inheritance of the basic color most of the time instead of redefining it for each component (it wasn't the case before the dark mode). Not sure that my quick explanation is understandable, but I'll take some time to test it.

[GaylordP]

Hello @kosyachniy ,

I have the same problem: have you found a solution?

Thanks in advance :)

[rsumilang]

I have a similar issue. Many variables missing.

[arashyeganeh]

@import "bootstrap/scss/root"; at the beginning of your SCSS file, outside of any other SCSS scope.

[woodwoerk]

I'm experiencing the same issue on 5.3.0, the following variables are all missing:

--bs-nav-link-font-weight: ;
--bs-card-box-shadow: ;
--bs-card-cap-color: ;
--bs-card-height: ;
--bs-card-color: ;
--bs-tooltip-margin: ;
--bs-select-disabled-color: ;
--bs-select-disabled-border-color: ;
--bs-btn-font-family: ;
--bs-dropdown-box-shadow: ;
--bs-card-title-color: ;
--bs-card-subtitle-color: ;

@arashyeganeh's suggestion didn't help, we were already importing "bootstrap/scss/root".

[arashyeganeh]

I'm experiencing the same issue on 5.3.0, the following variables are all missing:

--bs-nav-link-font-weight: ;
--bs-card-box-shadow: ;
--bs-card-cap-color: ;
--bs-card-height: ;
--bs-card-color: ;
--bs-tooltip-margin: ;
--bs-select-disabled-color: ;
--bs-select-disabled-border-color: ;
--bs-btn-font-family: ;
--bs-dropdown-box-shadow: ;
--bs-card-title-color: ;
--bs-card-subtitle-color: ;

@arashyeganeh's suggestion didn't help, we were already importing "bootstrap/scss/root".

write down your project structure and indicate the location where "bootstrap/scss/root" has been included, please

[woodwoerk]

write down your project structure and indicate the location where "bootstrap/scss/root" has been included, please

This is part of a Next.js project (full source code). We import bootstrap/scss/root in main.scss following the import order recommended in the Bootstrap docs, and our main.scss file is then imported to our layout component.

I switched back to Bootstrap v5.2.3 which fixed the issue. We're also using Reactstrap, which might be relevant for the bug, @kosyachniy are you also using Reactstrap in the above project?

[Laboratory]

write down your project structure and indicate the location where "bootstrap/scss/root" has been included, please

This is part of a Next.js project (full source code). We import bootstrap/scss/root in main.scss following the import order recommended in the Bootstrap docs, and our main.scss file is then imported to our layout component.

I switched back to Bootstrap v5.2.3 which fixed the issue. We're also using Reactstrap, which might be relevant for the bug, @kosyachniy are you also using Reactstrap in the above project?

Works for me, I had the same problem as you

[vis97c]

I'm using this cdn version and currently experiencing the same as @arashyeganeh