Trying to use SASS themes with custom colors, but I get "This variable was not declared with !default in the @used module."

[Christopher]

I am using dart sass to try to apply my custom colors, but it doesn't want to override the file per the documented instructions. In the first example, it does compile but the color isn't overridden in the file.

Using package sass v1.58.0

This doesn't override the primary color:

$primary: #4dcae6;

@import "~@progress/kendo-theme-default/dist/all.scss";

Apparently you can use the @use statement with a `with ( ... )` and that's supposed to work, but if I do that, I get the error "This variable was not declared with !default in the @used module.". I'm stuck.

@use "@progress/kendo-theme-default/dist/all.scss" with (
    $primary: #4dcae6
)

[Ivan Zhekov]

Hi, Christopher.

I am not sure which version of the themes you are using, but starting with v6 of the themes, we prefixed pretty much all variables related to kendo components to avoid conflicts with other frameworks, like bootstrap.

You can see all the changes in the changelog of the release -- https://github.com/telerik/kendo-themes/releases/tag/v6.0.0 -- but I will focus on what's important:

• color related variables are renamed $kendo-color-COLOR or $kendo-color-primary in your case.
• $accent and $accent variables are removed and you should use $kendo-color-primary and $kendo-color-primary-accent.

So that's about it, if you are using v6.0.0 or newer.

That will also take care of the @use scenario as well.

Regards,
Ivan Zhekov
Progress Telerik

[Christopher]

That is likely the cause... I was just following the instructions in the kendo documentation here - they don't mention the "kendo-" prefix. The README in the @progress/kendo-theme-default doesn't mention them and still notes "$primary" "$secondary", etc. I doubt I, or another customer would've known to go digging through the change-logs.
 
Additionally, I was using the sass file generated from your theme builder tool which doesn't seem to use these prefixes.

Basically, the tooling and documentation all seems to be out-of-date. I will update the generated code to use them and see how it goes.

 

[Ivan Zhekov]

You are absolutely right -- our documentation is indeed quite lagging behind and lacking in other scenarios.

Regarding the themebuilder and kendo-jquery, that part is also not completely clear in our documentation -- for 2023 R1 we've bumped the themes to v6 with all the major changes in variables and rendering. However, considering the sheer amount of changes, for kendo-jquery we've decided to postpone the release of said changes for 2023 R1 SP1.

That meant that kendo-jquery is still working with v5 of the themes and so is the Themebuilder for kendo-jquery.

Starting with 2023 R1 SP1, however, the products will be aligned. That in terms mean that kendo-jquery users, such as you, will be able to take full advantage of Themebuilder Pro, which offers greater customizing capabilities than the "classic" themebuilder.