Hello,

I'm adding sass-loader to my webpack build so that I can keep up to date with the latest theme builds more easily. We simply use the default theme.

Webpack is giving me the following warning, however ...

WARNING in ./node_modules/@progress/kendo-theme-default/dist/all.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/@progress/kendo-theme-default/dist/all.scss)
Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
Deprecation Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($a, $b) or calc($a / $b)

More info and automated migrator: https://sass-lang.com/d/slash-div

node_modules\@progress\kendo-theme-default\dist\all.scss 1039:15  k-math-div()
node_modules\@progress\kendo-theme-default\dist\all.scss 4138:21  root stylesheet

 @ ./node_modules/@progress/kendo-theme-default/dist/all.scss 8:6-188 22:17-24 26:7-21 52:25-39 53:36-47 53:50-64 57:6-67:7 58:54-65 58:68-82 64:42-53 64:56-70 66:21-28 77:0-158 77:0-158 78:22-29 78:33-47 78:50-64 55:4-68:5

1 warning has detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

Are there plans to improve 2.0.0 compatibility with kendo themes? math/calc should still be backwards compatible.

When creating a custom build, it's highly impractical to trim down the theme css. The Less source breaks out common widget properties, but the primary themable file lumps all widgets together into a single massive file. It would be nice if this could be split apart further to trim out unused widget styles entirely.

It would be nice if Theme variables would be separated into a different file, to make it possible to import those variables into your own site.less. 
This way colors etc can be re-used across the entire site.

Hi Kendo Team,

after we updated to version 2022.2.301 we decided to modify our theme by compiling the Metro theme from the source files and adjusting some of the variables provided.

When working on the multiselect styles however we noticed that changing the variable '@chip-solid-hover-text' in the 'type-metro.less' file did not lead to any change. The attached screenshot shows that the chip still keeps its black text color on hover even though the variable was set to white.

We inspected the _theme.less file in the folder Default/chip and noticed that the variable is not used by the theme (see screenshot).  Looking at the code this also seems to be the case for the 'selected' styles.

We can add additional styles to fix that on our end but since there is a variable for both cases I am sure this is just an oversight and wasn't planned.

Thanks,

Markus

With the new changes,  many variables were removed (like $primary-button-hovered-bg).

It is now generated through internal sass functions - but unfortunately, it only supports mixing color with black/white. resulting in washed-out colors if you want a lighter hover color.

I would expect to have an option to have a more linear lighten/darken sass functions.

Looking at the Kendo theme - try-lighten / try-darken exist that take the same input parameters.

There is also $kendo-solid-button-shade-function - but it is not marked as !default and cannot be overwritten.

Describe the bug
Starting from v2022.1.119 the scrollbar of the View Html tool of the Editor is missing.

To reproduce

1. Run this Dojo or the All Tools Demo
2. Click on the "View Html" Tool

Expected behavior
The textarea of the View Html's popup should be scrollable

Screenshots

Affected package (please remove the unneeded items)

• all themes

Affected suites (please remove the unneeded items)

• Kendo UI for jQuery

Affected browsers (please remove the unneeded items)

• All

Build system information (please remove the unneeded items)

• Not Applicable

Additional context
Bug also observed with Less Kendo jQuery Themes

In version 2.27 of Telerik UI for Blazor the following problematic behavior is observed with long labels in the Grid PopUp edit form:

• If no space is included, they are cut from the form
• If space is included, they are wrapped and not cut but are not matching the alignment of the other labels

When you have a button inside a MultiSelect Footer template (for example), it is different visualized compared to the same button outside of the component. This comes from the k-list-container that is applied when a button is inside a toolbar.

-------ADMIN EDIT---------

A possible workaround for the scenario is to use custom styles as shown below:

<div class="row">
    <div class="col-2">
        <TelerikButton ButtonType="Telerik.Blazor.ButtonType.Button"
                       Icon="k-icon k-i-add"
                       Primary="true">
            New Value
        </TelerikButton>
    </div>

    <div class="col-10">
        <TelerikMultiSelect Data="@(
                                            new List<SelectListItem>()
                                            {
                                                { new SelectListItem { Text = "Text 1", Value = "Value1" } },
                                                { new SelectListItem { Text = "Text 2", Value = "Value2" } },
                                                { new SelectListItem { Text = "Text 3", Value = "Value3" } },
                                                { new SelectListItem { Text = "Text 4", Value = "Value4" } }
                                            })"
                            FilterOperator="StringFilterOperator.Contains"
                            Filterable="true"
                            TItem="SelectListItem"
                            TValue="string"
                            TextField="Text"
                            ValueField="Value">
            <FooterTemplate>
                <TelerikButton ButtonType="Telerik.Blazor.ButtonType.Button"
                               Class="my-nested-button"
                               Icon="k-icon k-i-add"
                               Primary="true">
                    New Value
                </TelerikButton>
            </FooterTemplate>
        </TelerikMultiSelect>
    </div>
</div>

@code{
    public class SelectListItem
    {
        public string Value { get; set; }
        public string Text { get; set; }
    }
}

<style>
    .k-list-container .k-button.my-nested-button {
        background-color: #ff6358;
        align-items: flex-start;
        align-self: flex-start;
    }

    .k-list-container .k-button-primary.my-nested-button,
    .k-list-container .k-button.k-primary.my-nested-button {
        /*copy the colors from the basic button*/
        border-color: #ff6358;
        color: #ffffff;
        background-color: #ff6358;
        background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.04));
        /*change the flex alignment form the parent container*/
        align-items: flex-start;
        align-self: flex-start;
    }
</style>

Please add theme based on CSS variables. That would allow developers to change theme at run-time and offer our customers similar experience that most (large) web sites offers, like Gmail, Office 365 online ...

Also, in the long run, this could be the only theme that's needed. All others could be based on this one.