webpixels 1.2: Sass build breaks since Bootstrap > v5.2.3

[tranmartin]

I am compiling css from source and get the following error if I am using Bootstrap sources > v5.2.3

SassError: $color2: var(--bs-secondary-color) is not a color.
    ╷
212 │   @return mix(black, $color, $weight);
    │           ^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  bootstrap/scss/_functions.scss 212:11                      shade-color()
  webpixels/css/scss/core/variables/_typography.scss 118:31  @import
  webpixels/css/scss/core/variables/_index.scss 14:9         @import
  webpixels/css/scss/core/_index.scss 2:9                    @import
  webpixels/css/scss/components/tables/_index.scss 1:9       @import
  src/styles.scss 5:9                                        root stylesheet

[extrabright]

Hi @tranmartin,
Sorry for the delay. I just uploaded a new update which I think will solve the issue you posted.

Let me know if it everything works as expected.

[tranmartin]

Thank you for the effort. Unfortunately the error is still the same.

Which Bootstrap version did you test against?

[ajitam]

Hello looks like this wasn't resolved yet. What is the status with this problem/error? Is WebPixels still maintained?

[ajitam]

1. 1.2.6
2. 5.3.2
3. It's a Angular (15 or 16) and we are using ng build

Well I guess we will wait 2.3 week and hopefully this will get resolved with the update.

[imanimanyara]

@extrabright was this issue fixed? all builds are failing. Setup for Vite development tried with Parcel as well.

Bootstrap Version: Latest

This is the error:

x Build failed in 967ms error during build: Error: No arguments named $tooltip-color, $tooltip-bg-color or $border-color. ┌──> node_modules/@webpixels/css/forms/_validation.scss 10│ @include input-group-validation-state($state, $data...); │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ invocation ╵ ┌──> node_modules/@webpixels/css/core/mixins/_forms.scss 3 │ @mixin input-group-validation-state( │ ┌────────^ 4 │ │ $state, 5 │ │ $color, 6 │ │ $icon, 7 │ │ $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity) 8 │ │ ) { │ └─^ declaration ╵ node_modules/@webpixels/css/forms/_validation.scss 10:3 input-group-validation-state() node_modules/@webpixels/css/forms/_validation.scss 10:3 @import node_modules/@webpixels/css/forms/_index.scss 8:9 @import node_modules/@webpixels/css/main.scss 8:9 @import resources/assets/scss/app.scss 4:9 root stylesheet

[sitebuilderone]

Experiencing the same ...

Build failed.

@parcel/transformer-sass: No arguments named $tooltip-color, $tooltip-bg-color or $border-color.
┌──> node_modules/@webpixels/css/forms/_validation.scss

[frntline-dev]

@imanimanyara @sitebuilderone were you able to resolve this issue? Same issue here

[imanimanyara]

@frntline-dev No I wasn't. the issue needs to be resolved at the core by the author.