How to import color variables into my scss files?

1 Answer 88 Views
Styling / Themes
Licencje
Top achievements
Rank 1
Licencje asked on 08 Mar 2024, 12:00 PM

Before I was using

@use '~@progress/kendo-theme-default/scss/variables' as variables;

 

but recently after updating packages, I got jumped by a couple of errors saying there are no color variables in said file.
I found them in the dist folder but all those files also have

@import "all.scss";

 

at the end making me import whole scss files multiple times destroying all my overrides in previous files.

Is there any way I can import all Kendo theme variables to my scss files?

1 Answer, 1 is accepted

Sort by
0
Zhuliyan
Telerik team
answered on 12 Mar 2024, 10:46 AM

Hello Licencje,

Thank you for the provided information.

After version 7.1.0, with the color system implementation (you can learn more about the new color system here), we moved the color variables of the themes to a different path location - "kendo-theme-{name}/scss/core/color-system/swatch".

To use the variables as before, the path to the current scss file has to be updated to:

@use '@progress/kendo-theme-default/scss/core/color-system/swatch' as swatch;

Please, let me know if this resolves your problem.

If you need any further assistance, please don't hesitate to ask. I'd be happy to help.

Regards,
Zhuliyan
Progress Telerik

A brand new ThemeBuilder course was just added to the Virtual Classroom. The training course was designed to help you get started with ThemeBuilder for styling Telerik and Kendo UI components for your applications. You can check it out at https://learn.telerik.com
Licencje
Top achievements
Rank 1
commented on 15 Mar 2024, 08:18 AM

Works
Thanks a lot
Tags
Styling / Themes
Asked by
Licencje
Top achievements
Rank 1
Answers by
Zhuliyan
Telerik team
Share this question
or