Unable to Override Variables - Classic Theme Package (v.10.0.1)

Web Themes Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Declined

Last Updated: 22 Nov 2024 19:05 by AGB

AGB

Created on: 18 Nov 2024 15:53

Type: Bug Report

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

2 comments

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.