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

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

About this issue

Original URL
State: closed
Created a year ago
Comments: 15 (7 by maintainers)

Most upvoted comments

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

mdo on Jun 6, 2023

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.

Eseperio on Aug 1, 2023

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

erikhansenmujica on Jun 1, 2023

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: https://github.com/twbs/bootstrap/blob/cb021439c683d9805e2864c58095b92d405e9b11/scss/_variables.scss#L1370

In v5.3.0, it is now: https://github.com/twbs/bootstrap/blob/60098ac499d30aa50575b0b7137391c06ef25429/scss/_variables.scss#L1472

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.

julien-deramond on Jun 3, 2023