Why was $kendo-selected-bg merged with primary color not base?

1 Answer 107 Views
General Discussions
Mauro
Top achievements
Rank 1
Mauro asked on 16 Jul 2024, 12:49 PM | edited on 16 Jul 2024, 01:11 PM

There is currently no way to separate selected color and primary color in the new var based theme.

Primary color are often way too strong and heavy for a selected background.

Half the selected states are hard linked to primary color, while the other half to base.

Right now, the only way to separate this is to write CSS overrides for every single component that has some selected states.

It feels like the theme has become way too strict and opinionated. Standard common states should be still globally themable and not linked to some base color. 

$kendo-selected-text / bg for example cannot be overwritten either  -  they are not marked as !default.

1 Answer, 1 is accepted

Sort by
0
Emil
Telerik team
answered on 19 Jul 2024, 12:36 PM

Hello Mauro,

Thank you very much for expressing your opinion.

The point you have brought attention to is valid and worth considering.

Please keep in mind that this is the initial version of the Color system and we are actively gathering and evaluating feedback based on usage in order to enchance and improve upon what we have laid out.

In general terms the idea behind the Color system is to introduce a structured way of managing color variable groups throughout the theme.

The way we currently handle selected states is somewhat dictated by the different theme color variations ( primary, secondary, tertiary, etc. ) that a component has.

Due to that fact each theme color variant has it's own active/selected color which is generated based on that specific theme color.

With that in mind you could see how one global selected state would not necessarily suit us.

All of that said, as I previously mentioned these are the early stages of the Color system and there is always room for improvement.

We will carefully evaluate your feedback and consider possible implemetation, however we will need to keep the aforementioned specifics in mind.

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

Mauro
Top achievements
Rank 1
commented on 19 Jul 2024, 01:16 PM

Some of the issues come from the lack of a option to override the the main theme color mapping it does with a new system.

https://github.com/telerik/kendo-themes/blob/625afb7707a490189438ffb5c2859720098d0aa7/packages/default/scss/core/color-system/_swatch-legacy.scss#L4

Overwritesm but since they are not marked !default, you cannot reassing.

Emil
Telerik team
commented on 24 Jul 2024, 01:04 PM

Hi Mauro,

The !default flag has been intentionally omitted there with the rationale that the user should not have to modify these variables separately as this might lead to undeterministic behaviour.

The purpose of the swatch_legacy file is to map the "old" variables with the new color system.

As previously mentioned the different component variants ( theme colors and fill modes ) make having one global selected state color rather difficult since it may not fit every scenario.

If you still want to achieve that you could try the following:

  • Disable the new color system by setting $kendo-enable-color-system to false. In that way you would get the "old" behaviour and would be able to override the selected background color separating it from the primary color
  • Override the selected state class .k-selected however you should have specificity in mind

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

Mauro
Top achievements
Rank 1
commented on 24 Jul 2024, 01:11 PM

$kendo-enable-color-system  false 

Seems to disable much more than just the swatch mapping. It looks like it is used across the theme to change the behavior of the theme.

Emil
Telerik team
commented on 29 Jul 2024, 12:43 PM

Hi Mauro,

You are correct in stating that the $kendo-enable-color-system variable is responsible for more than mapping the variables to the new color values.

In fact as I previously mentioned ( apologies if it did not become clear ), it will disabled the new Color System entirely and you will get the pre v8.0.0 behaviour of the themes.

You can find more information about this topic in this dedicated article.

Tags
General Discussions
Asked by
Mauro
Top achievements
Rank 1
Answers by
Emil
Telerik team
Share this question
or