[BUG] Users cannot customize the $kendo-breakpoints variable when using Kendo themes

[epetrow]

Bug Description

If you include any Kendo theme in a project along with the kendo-themes-utils package and try to customize the $kendo-breakpoints variable you would get the following error:

This module was already loaded, so it can't be configured using "with".
    ┌──> node_modules/@progress/kendo-theme-utils/scss/all.scss
1   │   @forward "../scss/index.scss";
    │   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ new load
    ╵
    ┌──> node_modules/@progress/kendo-theme-material/scss/utils/_index.scss
1   │   @forward "@progress/kendo-theme-utils/scss/index.scss";
    │   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ original load
    ╵
    ┌──> projects/angular-components/src/styles/_theme-variables.scss
212 │ ┌ @use '@progress/kendo-theme-utils/dist/all' as * with (
213 │ │       $kendo-breakpoints: (
214 │ │       xs: 20px,
215 │ │       sm: 500px,
216 │ │       md: 700px,
217 │ │       lg: 900px,
218 │ │       xl: 1000px,
219 │ │       xxl: 1200px
220 │ │     )
221 │ │ );

Steps to Reproduce

Steps to reproduce the behavior:

1. Import any theme and try customizing the breakpoints like this:

@use "@progress/kendo-theme-material/scss/all.scss" as *;
@use "@progress/kendo-theme-utils/scss/all.scss" as * with (
  $kendo-breakpoints: (
    xs: 0,
    sm: 480px,
    md: 768px,
    lg: 922px,
    xl: 1200px
  )
);

2. Compile and observe the aforementioned error

Expected Behavior

Users are able to customize the $kendo-breakpoints variable when using Kendo themes.

Actual Behavior

The breakpoints customization does not work and Sass throws a compile error.

Affected packages(s)

• kendo-theme-utils

Workaround

A potential workaround can be the following, however this implies that the user would not want to customize the theme, only the breakpoints.

// Use the material theme as is
@use "@progress/kendo-theme-material/dist/all.css" as *;
@use "@progress/kendo-theme-utils/scss/all.scss" as * with (
  $kendo-breakpoints: (
    xs: 0,
    sm: 480px,
    md: 768px,
    lg: 922px,
    xl: 1200px
  )
);