$input-btn-border-width on bootstrap 5.3 is a custom variable (on 5.2 was a simple scss variable)

[meriturva]

See here:

https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss#LL804C1-L804C24

$input-btn-border-width is now a custom variable.

(see bootstrap 5.2 version: https://github.com/twbs/bootstrap/blob/v5.2.3/scss/_variables.scss#L738 where $input-btn-border-width was a simple scss variable)

The main problem is that on file:

@progress\kendo-theme-bootstrap\scss\input\_variables.scss you are using:

$kendo-input-border-width: $input-border-width !default;
$kendo-input-border-height: ( $kendo-input-border-width * 2 ) !default;

so scss compilation gives me an error:

SassError: Undefined operation "var(--bs-border-width) * 2".
   ╷
10 │ $kendo-input-border-height: ( $kendo-input-border-width * 2 ) !default;

My temporary fix is to define, before importing _variables file:

$kendo-input-border-width: 1px !default;

Basically, the main problem is that package @progress/kendo-theme-bootstrap 6.4.0 with bootstrap 5.3 doesn't work anymore.

Feedback item: https://feedback.telerik.com/themes/1611266

Diego

[Camo30]

Same here. Seems that this package is not yet compatible with bootstrap 5.3, tested up to recent version 5.3.2.
Temporary fix is to downgrade to bootstrap 5.2.3.

[vveesseelliinnaa]

Reported again in Ticket ID: 1627146

[vveesseelliinnaa]

Reported again in Ticket ID: 1627595

[AStoker]

Running into a similar issue that appears related. Same kind of error, but regarding the $kendo-button-border-width in the multiselect element.

Undefined operation "var(--bs-border-width) * 2".
   ╷
69 │ $kendo-button-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} + #{$kendo-button-border-width * 2} ) !default;
   │                                                                                                        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules\@progress\kendo-theme-bootstrap\scss\button\_variables.scss 69:104  @import
  node_modules\@progress\kendo-theme-bootstrap\scss\button\_index.scss 21:9        @import
  @progress\kendo-theme-bootstrap\scss\multiselect\_index.scss 21:9                @import

Downgrading bootstrap to specifically 5.2.3 (was 5.3.3) fixes me for now, but that's not a real solution (especially for a ticket that's been open for months now).