Syntax Error: $color: shift-color(#2976af, 20%) is not a color

[palmtown]

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

When upgrading to version 5.3.0, I get the error "Syntax Error: $color: shift-color(#2976af, 20%) is not a color."

Syntax Error: $color: shift-color(#2976af, 20%) is not a color.
   ╷
37 │   @return red($value), green($value), blue($value);
   │           ^^^^^^^^^^^
   ╵
  node_modules\bootstrap\scss\_functions.scss 37:11    to-rgb()
  node_modules\bootstrap\scss\_root.scss 87:39         @import`

Reduced test cases

none.

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

Windows, Linux

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

Chrome, Firefox, Microsoft Edge

What version of Bootstrap are you using?

5.3.0

[palmtown]

Note that this issue doesn't exists in 5.2.3.

[julien-deramond]

Thanks for opening this issue @palmtown
Could you please share your custom Sass variables (especially related to colors) in order to see where the problem could come from?

[erikhansenmujica]

I have all these errors too that broke my app, I don't understand

[mdo]

Are you missing some file imports? I feel like this is the missing _maps.scss issue. https://blog.getbootstrap.com/2022/07/19/bootstrap-5-2-0/

[erikhansenmujica]

I have that already imported, the app worked but with this update, I had the error of some variables missing variables-dark file. I imported that file and it solved the problem but now I have this same error of: $color: shift-color(#2976af, 20%) is not a color

[palmtown]

@erikhansenmujica

I have that already imported, the app worked but with this update, I had the error of some variables missing variables-dark file. I imported that file and it solved the problem but now I have this same error of: $color: shift-color(#2976af, 20%) is not a color

Same experience which I opened an issue at #38687

[VividLemon]

I've had the same issue stemming from an update in
bootstrap-vue-next/bootstrap-vue-next@main...VividLemon:bootstrap-vue-next:main#diff-e04aecfce6b6cb542767b096855fc5eb2681ba5a764f65167447440a9df1a92eR66
@
https://github.com/VividLemon/bootstrap-vue-next/blob/main/packages/bootstrap-vue-next/src/components/BToast/_toast.scss#L1
Which is odd because it exists in https://getbootstrap.com/docs/5.3/components/toasts/#sass-variables
And even odder as my import of scss and the Vue compiler didn't change. I may try downgrading to see the behavior, but at the moment I have more pressing issues in other dependencies.

[julien-deramond]

I've had the same issue stemming from an update in bootstrap-vue-next/bootstrap-vue-next@main...VividLemon:bootstrap-vue-next:main#diff-e04aecfce6b6cb542767b096855fc5eb2681ba5a764f65167447440a9df1a92eR66 @ https://github.com/VividLemon/bootstrap-vue-next/blob/main/packages/bootstrap-vue-next/src/components/BToast/_toast.scss#L1 Which is odd because it exists in https://getbootstrap.com/docs/5.3/components/toasts/#sass-variables And even odder as my import of scss and the Vue compiler didn't change. I may try downgrading to see the behavior, but at the moment I have more pressing issues in other dependencies.

In v5.2.3, here was the definition of this variable:

bootstrap/scss/_variables.scss

Line 1370 in cb02143

$toast-header-background-color: rgba($white, .85) !default;

In v5.3.0, it is now:

bootstrap/scss/_variables.scss

Line 1472 in 60098ac

$toast-header-background-color: rgba(var(--#{$prefix}body-bg-rgb), .85) !default;

In your source code, there's b-toast-background-opacity: alpha($toast-background-color) !default;.

The change of definition of $toast-background-color using custom properties now breaks Sass compilation when called with alpha, and would also fail with color-contrast Bootstrap's function because of contrast-ratio called within this function.

It can be tested easily with:

$test: rgba($white, 0.85);
@debug(alpha($test));
@debug(alpha($toast-background-color)); // Only this one fails during Sass compilation

This is a first quick analysis, but Bootstrap's dark mode implementation relies a lot on custom properties in _variables.scss, so I'm afraid that depending on the users, especially advanced Sass users, some calls won't work as it was the case before resulting in Sass compilation errors.

[VividLemon]

I've had the same issue stemming from an update in bootstrap-vue-next/bootstrap-vue-next@main...VividLemon:bootstrap-vue-next:main#diff-e04aecfce6b6cb542767b096855fc5eb2681ba5a764f65167447440a9df1a92eR66 @ https://github.com/VividLemon/bootstrap-vue-next/blob/main/packages/bootstrap-vue-next/src/components/BToast/_toast.scss#L1 Which is odd because it exists in https://getbootstrap.com/docs/5.3/components/toasts/#sass-variables And even odder as my import of scss and the Vue compiler didn't change. I may try downgrading to see the behavior, but at the moment I have more pressing issues in other dependencies.

In v5.2.3, here was the definition of this variable:

bootstrap/scss/_variables.scss

Line 1370 in cb02143

$toast-header-background-color: rgba($white, .85) !default;

In v5.3.0, it is now:

bootstrap/scss/_variables.scss

Line 1472 in 60098ac

$toast-header-background-color: rgba(var(--#{$prefix}body-bg-rgb), .85) !default;

In your source code, there's b-toast-background-opacity: alpha($toast-background-color) !default;.

The change of definition of $toast-background-color using custom properties now breaks Sass compilation when called with alpha, and would also fail with color-contrast Bootstrap's function because of contrast-ratio called within this function.

It can be tested easily with:

$test: rgba($white, 0.85);
@debug(alpha($test));
@debug(alpha($toast-background-color)); // Only this one fails during Sass compilation

This is a first quick analysis, but Bootstrap's dark mode implementation relies a lot on custom properties in _variables.scss, so I'm afraid that depending on the users, especially advanced Sass users, some calls won't work as it was the case before resulting in Sass compilation errors.

Do you perhaps have a temporary fix solution that I can use while I try to comprehend the purpose of the custom scss?

[mdo]

I think this is safe to close out for now without seeing more live demos and details.

[doughlass]

@mdo I just had an issue where I was trying to set $link-color: color-contrast($white) in my _variables.scss

Kept getting an error where it told me that was not a color.

When I attempted the following, it works.

a {color: color-contrast($white);}

It would appear to me that a function return can't be returned to a variable.

[julien-deramond]

I just had an issue where I was trying to set $link-color: color-contrast($white) in my _variables.scss

Just tried it and it doesn't seem to be a problem: Sass compilation is fine. Please don't forget to create reproducible environments for us via Stackblitz (or any other tools) so we can help.

[Eseperio]

Despite it is too late for a solution, the arbitrary introduction of to-rgb asumming that every color in maps is always defined as hex, has broke every custom implementation of bs5 where users (like me) took advantage of css variables for colors like $link-color, where in my app belongs to var(--myproj-link-color). Now, a lot of time and effort is required to keep our projects working with latest bs minor update.

I understand the fact that out of the box it works, but at least make mandatory that every color defined in bootstrap must be hex and devs will implement our customizations in a different way.

[SwapnilAkolkar]

i think check your initializationn css file keep boostap imports at the top of rest css imports

// Bootstrap initializaton
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/variables-dark';
@import '~bootstrap/scss/mixins';
@import "~bootstrap/scss/maps";
@import "~bootstrap/scss/utilities";
@import "~bootstrap/scss/helpers";
@import "~bootstrap/scss/utilities/api";

[udomnohara]

Are there solution for this?