Error when using $body-bg with a custom property

[slacto]

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 want to use $body-bg: var(--primary) because each page has a different color theme in my solution.
But this one line won't build: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_table-variants.scss#L5 ($body-bg is used in line 4)

Error: $color2: "var(--primary)" is not a color for `mix' on line 201 of ../bootstrap/_functions.scss, in `table-variant'.

I'm not sure if $body-bg should be allowed to use a custom property, but this is the only place it creates an error.

Reduced test cases

// scss-docs-start import-stack
@import "bootstrap/mixins/banner";
@include bsBanner("");

// Configuration
@import "bootstrap/functions";
@import "bootstrap/variables";
@import "bootstrap/variables-dark";
@import "bootstrap/maps";
@import "bootstrap/mixins";
@import "bootstrap/utilities";

// Custom variables
$body-bg: var(--primary);

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

Windows

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

No response

What version of Bootstrap are you using?

v5.3.3

[julien-deramond]

Hey @slacto

IDK your context exactly, but just in case it can be useful, overriding Sass variables should rather be done right after the @import "bootstrap/functions (see Docs > Customize > Sass > Importing). Otherwise, you might not have everything updated based on this new color.

So if I do it this way, I would also have errors at other places, such as:

> sass --style expanded --source-map --embed-sources --no-error-css scss/:dist/css/

Error: $color: var(--bs-primary) is not a color.
   ╷
37 │   @return red($value), green($value), blue($value);
   │           ^^^^^^^^^^^
   ╵
  scss/_functions.scss 37:11    to-rgb()
  scss/_maps.scss 131:13        @import
  scss/bootstrap-grid.scss 9:9  root stylesheet

Error: $color: var(--bs-primary) is not a color.
   ╷
37 │   @return red($value), green($value), blue($value);
   │           ^^^^^^^^^^^
   ╵
  scss/_functions.scss 37:11      to-rgb()
  scss/_maps.scss 131:13          @import
  scss/bootstrap-reboot.scss 7:9  root stylesheet

Error: $color: var(--bs-primary) is not a color.
   ╷
37 │   @return red($value), green($value), blue($value);
   │           ^^^^^^^^^^^
   ╵
  scss/_functions.scss 37:11         to-rgb()
  scss/_maps.scss 131:13             @import
  scss/bootstrap-utilities.scss 8:9  root stylesheet

Error: $color: var(--bs-primary) is not a color.
   ╷
37 │   @return red($value), green($value), blue($value);
   │           ^^^^^^^^^^^
   ╵
  scss/_functions.scss 37:11  to-rgb()
  scss/_maps.scss 131:13      @import
  scss/bootstrap.scss 10:9    root stylesheet
ERROR: "css-compile" exited with 65.

I know it's not really convenient right now, and doing $body-bg: var(--primary) would be handy. But unfortunately, this won't work with the current implementation. Some Sass variables accept to be set with custom props, and others don't right now. It mainly depends on whether or not we apply Sass functions to these colors inside the framework.

Regarding your use case, it might be better, if possible, to override $body-bg and $body-bg-dark with raw color values, or Sass variables that are not custom properties. Something like:

$body-bg:  $my-custom-light-color;
$body-bg-dark: $my-custom-dark-color;

This way, the compilation would work, and you'd still have a correct switch between light and dark modes.