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?

[extrabright]

Hello, yes, v2 is coming in the next 2-3 weeks. All the development power is put in this right now, so every issue will get fixed with this launch.

However, can you give me more details about the error?

1. Which Webpixels css version are you using?
2. What Bootstrap version are you using?
3. Which build tools are you using?

Thanks.

[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