Web Themes Feedback Portal
Back to Feed
Request a Feature Report a Bug
Declined
Last Updated: 06 Dec 2024 16:02 by ADMIN
AGB
Created on: 18 Nov 2024 15:53
Type: Bug Report
0
Unable to Override Variables - Classic Theme Package (v.10.0.1)

Hi Guys,

I'm trying to migrate my app from using the old @import (v.9.0.0) methodology to the new @use (v.10.0.1) methodology but things are not going well because it would appear only certain variables have the capability of being overridden.

To illustrate create an index file with the following contents:

@use "sass:map";

@use '@progress/kendo-theme-classic/scss/index.scss' as *;

// $kendo-colors: map.merge($kendo-colors, k-generate-color-variations('base',      red, 'classic'));
// $kendo-colors: map.merge($kendo-colors, (
//     app-surface: red,
// ));
// $kendo-checkbox-checked-text: red;
// $kendo-table-bg: red;
// $kendo-font-size-sm: 12px;
// $kendo-input-placeholder-opacity: 0.8;

@include kendo-theme--styles();

@debug k-color(base);
@debug k-color(app-surface);
@debug $kendo-checkbox-checked-text;
@debug $kendo-table-bg;
@debug $kendo-font-size-sm;
@debug $kendo-input-placeholder-opacity;

When compiled the following Debug values are output

Debug: var(--kendo-color-base, #ebebeb)
Debug: var(--kendo-color-app-surface, #ffffff)
Debug: var(--kendo-color-on-primary, #ffffff)
Debug: var(--kendo-color-surface-alt, #ffffff)
Debug: 0.75rem
Debug: 1

Now uncomment the variable overrides and recompile ... This time the Debug output is as follows

Debug: var(--kendo-color-base, red)
Debug: var(--kendo-color-app-surface, red)
Debug: var(--kendo-color-on-primary, #ffffff)
Debug: var(--kendo-color-surface-alt, #ffffff)
Debug: 12px
Debug: 1

So as you can see the  

$kendo-checkbox-checked-text
$kendo-table-bg
$kendo-input-placeholder-opacity

variables have not been overridden.

Is this a bug with the new SASS files or can we no longer override all variables?

Regards
Alan


5 comments
ADMIN
Zhuliyan
Posted on: 06 Dec 2024 16:02

Hi Alan,

Thank you for sharing your approach.
It’s great to hear you’ve successfully worked through the Kendo SASS code and adapted your overrides using CSS variables.  

We’d appreciate any feedback on the new Dart Sass syntax, especially regarding how components and modules can be customized. We understand the migration from Node Sass may cause some inconvenience, but it’s necessary as Node Sass is now deprecated.  

If you have additional questions or suggestions, please share them with us!

Regards,
Zhuliyan
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.

AGB
Posted on: 02 Dec 2024 08:17
Hi Zhuliyan,

Thank you for expanding on your initial posting.

Although I can see it would help in some situations it still doesn't allow me to gain access to current state of Kendo variables which I was using in my later overrides.

After trawling though the Kendo SASS code I now have a better understanding of what's going on and have completely rewritten my overrides to use CSS variables when I need access to the Kendo state.  

Regards
Alan
ADMIN
Zhuliyan
Posted on: 29 Nov 2024 17:07

Hello Alan,

I apologize if my previous statement was unclear. To illustrate the behavior I mentioned, I created an isolated example project. 

Please follow these steps to run the example project:
1. Download the `sample-project.zip` file.
2. Extract the contents and navigate to the root directory.
3. Run `npm install` in the root directory.
4. Execute `npm run sass` to compile the main `_styles.scss` file.

You'll find two example approaches in the `_styles.scss` file of the project. The first reproduces the issue you're experiencing, while the second one follows Sass's recommended approach to customize variables. This project does not include any kendo variables or kendo dependencies.

Here are some additional details about each example:

1. Example one. 
This example customizes the values for the $primary, and $secondary variables after the `@use` of the `_customize` file. The debug statement outputs `red` and `pink` (the colors from the `customize.scss` file), but the compiled `styles.css` file contains the correct colors (`green`, `lightgreen`). These variables can be trusted because the output is as expected, though the `@debug` statement outputs different values.

2. Example two.
In this example, we customize the $primary and $secondary variables according to Sass's intended method - within the with() block (see the link). The output CSS file again reflects the expected values, and now the `@debug` statements show the correct values as well. 

In summary, you can use either of the two examples for customizing the theme with the kendo variables, as the output CSS is the same in both cases. However, the first example has a disadvantage: if you want to reference the customized variable (for instance, in the `@debug` statement), it will not be considered. We recommend customizing the Kendo variables by including them within the `with ()` block scope as this is the recommended way by Sass.

If you have any questions or need further clarification, feel free to ask!

Regards,
Zhuliyan
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.

Attached Files:
AGB
Posted on: 22 Nov 2024 19:05

Hi Zhuliyan,

Thanks for investigating and coming back to me but I have issue with your statement:

"the Sass @debug does not have a defined context to determine which `$kendo-` variable we want to target"

If this was the case why do the $kendo-colors & $kendo-font-size-sm not show there default values rather then the overrides?

If these two variables can be overridden without using 'with' why can't the others?

As you have 'decline' this as a bug report it looks like I'm going to have to rewrite things to provide my own override variables because the $kendo-* variables cannot be relied upon.

Regards
Alan


 

ADMIN
Zhuliyan
Posted on: 22 Nov 2024 15:54

Hello AGB,

Thank you for the provided description.

The variables you are attempting to override are successfully being overridden, and their expected values are being applied to the compiled file.

The confusing behavior of the unexpected values in the @debug output is a result of how the new Dart Sass context functions.
In the provided example, the Sass @debug does not have a defined context to determine which `$kendo-` variable we want to target - the one we declare for customization or the one that comes directly from the theme.

The recommended approach to avoid such confusion is to configure these component Sass variable customizations in the with () block when using the themes.

Please find this example below:


@use "sass:map";

// @use the kendo theme with the component variables you want to customize.
@use "@progress/kendo-theme-classic/scss/index.scss" as * with (
  $kendo-checkbox-checked-text: red,
  $kendo-table-bg: red,
  $kendo-font-size-sm: 12px,
  $kendo-input-placeholder-opacity: 0.8
);

// Customize $kendo-colors after the theme import to use the `k-generate-color-variations` function.
$kendo-colors: map.merge($kendo-colors, k-generate-color-variations("base", red, "classic"));
$kendo-colors: map.merge( $kendo-colors, ( app-surface: red,));

// Include all theme styles.
@include kendo-theme--styles();

// @debug now shows the correct values
@debug k-color(base);
@debug k-color(app-surface);
@debug $kendo-checkbox-checked-text;
@debug $kendo-table-bg;
@debug $kendo-font-size-sm;
@debug $kendo-input-placeholder-opacity;


I hope the provided information and example resolves your concern. For more information feel free to visit our Dart Sass Syntax page.
If any additional help is needed, do not hesitate to ask.

Regards,
Zhuliyan
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.

Create an account Log In
View
Type
Status