Completed
Last Updated: 15 Jan 2025 07:46 by ADMIN
Stephen
Created on: 02 Dec 2024 20:38
Type: Bug Report
0
k-color mixin not working after migrating themebuilder version

We recently upgraded our theme builder to ultimate so we could migrate our theme builder project from R1 2023 to Q4 2024. After we did this there were some small changes we needed to fix but after that we followed all the normal installation procedures.

We are running angular 18 and have updated all kendo components to the latest versions.

After installing the new theme we also added/changed the way we imported the theme package following the documentation (using @use).

Most everything looks good but there is one large issue with several of our components and that is the kendo theme mixin  "k-color" is not working.

In several places there is no color or background color being set on the component(s). When i inspect the style i see     color: k-color(primary); is not working. dev tools states that the variable is wrong. i can only assume the mixin is not imported/being used.

Image of my description

13 comments
ADMIN
Nick Iliev
Posted on: 14 Jan 2025 12:21

Hey Stephen,

 

The team has just released a patch version of ThemeBuilder that resolves the issue we discussed. You can reload your project and re-use the "Export All" option to generate an SCSS theme with the corrected references. Please don't hesitate to contact me if you need any further assistance!

 

Regards,
Nick Iliev
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Stephen
Posted on: 10 Jan 2025 16:23
reopening this issue again.
ADMIN
Petar
Posted on: 03 Jan 2025 13:34

Hello Stephen,

It seems that the ticket closes automatically after 7 days of inactivity, even though my colleague Nick has tried to find a workaround for this problem. I will take the initiative to reopen it manually each time this occurs until the problem is resolved.

Just as a side note, the team has made progress and opened a PR to resolve the Sass compilation issue. Please note that it may take some time for the fix to be fully tested and released. We will keep you updated with any progress we have on this.

Regards,
Petar
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Stephen
Posted on: 02 Jan 2025 16:39
despite your previous comment it still closed automatically so I'm reopening it.
ADMIN
Nick Iliev
Posted on: 24 Dec 2024 09:42

Hello Stephen,

 

I've marked this ticket as pending and set the need to add an additional answer so that it won't be closed automatically. Once we have the fix published live I will immediately update the thread. Currently, I can provide a fixed date, but we expect the patch to be released in the weeks after the New Year's holidays.

 

Regards,
Nick Iliev
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Stephen
Posted on: 23 Dec 2024 16:15
Bumping issue to keep the status open.
ADMIN
Nick Iliev
Posted on: 17 Dec 2024 11:41

Hi Stephen,

 

I wanted to inform you that our support system may automatically close a ticket after a period of inactivity. Of course, you can reopen a ticket at any time. Additionally, I am monitoring all discussions, and I will update this thread even if it has been automatically closed, once the fix is ready and goes live.

 

Regards,
Nick Iliev
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Stephen
Posted on: 16 Dec 2024 19:11
Thank you. I'll be keeping this ticket open until a resolution is available.
ADMIN
Nick Iliev
Posted on: 13 Dec 2024 08:59

Hello Stephen,

 

While I can provide a specific date the team works with higher priority on resolving the issue. As we spoke, we uncovered an additional issue related to the same scenario while using the latest patch version of TB from the 12th of December (yesterday). The issue is publicly available from the following GitHub thread, which you can use as a reference and for tracking purposes:

https://github.com/telerik/themebuilder/issues/134 (threat also contains a temporary workaround for recently generated themes)

Once we have a stable fix I will immediately update this ticket and the linked thread.

 

Regards,
Nick Iliev
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Stephen
Posted on: 12 Dec 2024 17:37
Can I get an update on the eta for when the hotfix will be deployed for this issue?
ADMIN
Nick Iliev
Posted on: 04 Dec 2024 08:22

Hello Stephen,

 

Thank you for providing the demo; it was incredibly helpful in reproducing and identifying the issue!

Our investigation confirmed that there is indeed a legitimate bug in ThemeBuilder. The SCSS files generated do not properly reference some internal Kendo theme files. As a result, the k-color mixin is not successfully loaded when using SASS; however, this issue does not occur when using precompiled CSS.

We have identified this as a high-priority bug, and our team is actively working on a fix through a patch version. Once the fix is released, I will update this ticket, allowing you to re-export the new ThemeBuilder theme.

Meanwhile, as a temporary workaround, you can manually patch the generated theme through the following approach:

- Open the following line in <your-theme>/dist/scss/_overrides.scss file

https://github.com/TheCodingWaffle/kendo-them-builder-requested-demo/blob/main/mpp-v18-theme-builder/dist/scss/_overrides.scss#L3 

- Below the third line (after the tokens import), add the following line:

@use '@progress/kendo-theme-bootstrap/scss/all.scss' as *;

After the modification, the file should look like the one below.

Then re-run your Angular application, and you should see the expected results as they are styled in ThemeBuilder.

 

Regards,
Nick Iliev
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Stephen
Posted on: 03 Dec 2024 17:20

I have shared the theme with the provided email. I also created a repository with the bug as requested. i tried to load it in stackblitz but stackblitz is having issues with the project. i think it is because the way the themebuilder needs to be preinstalled. either way provided below is a link to the public repository you can clone and run:

 

Requested Repository

ADMIN
Nick Iliev
Posted on: 03 Dec 2024 08:51

Hello Stephen,

 

Based on the screenshot, it looks like the k-color mixin function is not present in the imported theme, which might be related to using the old version of the theme in the Angular project (where the k-color mixin is not yet present) or having a misconfiguration during the installation of the new theme.

Could you please share your ThemeBuilder project (share it with themebuilder@progress.com while using the Share option within the ThemeBuilder app) alongside an Angular demo reproducing the issue you are observing? Providing the Angular demo that reproduces your use case and the observed issue will allow us to investigate further and suggest a tailored solution.

 

Regards,
Nick Iliev
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.