I was looking at the new SASS Themebuilder. For TabStrip, it looks like the tabs use the "Accent" foreground/background, with the currently selected tab using the "Common" pair. So the unselected tabs are drawing attention to themselves, while the selected one is (generally) more muted. This is opposed to the similar ButtonGroup, which seems to use "Base" colors, with the selected button using the "Selected" pair. It would seem natural for TabStrip to use Base/Selected instead of Common/Accent as well?
I see that "Menu" uses Accent (and Base for its menu/submenu content items), but there isn't such a thing as the "selected" menu of a group. Even if TabStrip uses "Common/Accent", wouldn't one expect usage to be reversed, with only the current tab using "Accent"?
What's done probably makes sense in the grand scheme of things - I'm just curious. We're looking at replacing our current frankenstyling (a hacked up version of the old v1 Default) with a more cleanly extended SASS v2 Default, and the way TabStrip and a couple others use the stylings seems a bit non-intuitive.
5 Answers, 1 is accepted
Thank you for the feedback, it's actually well accepted.
The idea of the themebuilder is not to expose all variables, but rather a subset of those variables. We've been thinking on removing some variables from the theme builder (they will still be available for Sass customization) and i will update you when we do so. We'll also see how to improve the customization of tabstrip.
Regards,
Ivan Zhekov
Progress Telerik
Rank 1
I wasn't really thinking of the Themebuilder as such, but the styling choices in the Default theme itself. Since a "Selected" color is defined, and is used to style the currently selected button in a ButtonGroup, it would seem natural that the currently selected tab in TabStrip would also be styled with "Selected". And if "Accent" was going to be used instead, it would be applied to the current tab, not the remaining tabs.
But perhaps this was a historical choice from the original LESS Default theme that was carried over, or perhaps this difference between ButtonGroup/TabStrip and other widgets works best for most color schemes. It just seemed a little odd - I find the "current" tab doesn't "pop" as you'd expect when looking at the bar (just personal preference, I guess).
As you say, one wouldn't expect the Themebuilder to be able to change the actual stylenames applied to something like the TabStrip - I was just using it to see which styles were applied to which widget. We'll be downloading the SASS source to try and rebuild our existing mess from a clean base, and presumably we can override a couple of the tab styles so they use Base/Selected instead of Accent/Common. The Themebuilder is quite handy for what it does, though.
you made good point, the answer is a bit longish, so bear with me.
While the selected color is tied to accent color (as visible from https://github.com/telerik/kendo-theme-default/blob/develop/scss/_variables.scss#L145), our designers wanted dualtone themes (swatches) to be achievable from the themebuilder. Such swatches include Nordic, Nova, Powder Blue, Vintage etc. So we enabled said customization.
Prior each component implementation, we consult with our designers to know wether a color is accent or selected, per say. Specifically, for the tabstrip the idea is that the current tab and the content below should look like a continuous content e.g. same styles applied (as visible from the design below). In terms it's vice versa for the inactive links -- they're prominent.
The final remarks is also spot on. We've been thinking on a way to show which color customizes which part, but thus far we have little to no success.
Few Links:
* UX repository: https://github.com/telerik/kendo-ux.
* Reference design (prior the split into different components): https://github-render.s3.amazonaws.com/prod/13c625b79678986d820f02bf74eb063d-render.png?AWSAccessKeyId=AKIAJILR36AMCOMBK3MQ&Signature=Xgz3QUcjG1PNMHrzftUziQ/4CHs%3D&Expires=1497969719.
Regards,
Ivan Zhekov
Progress Telerik
Rank 1
[quote]Ivan Zhekov said:atches include Nordic, Nova, Powder Blue, Vintage etc. So we enabled said customization.
Prior each component implementation, we consult with our designers to know wether a color is accent or selected, per say. Specifically, for the tabstrip the idea is that the current tab and the content below should look like a continuous content e.g. same styles applied (as visible from the design below). In terms it's vice versa for the inactive links -- they're prominent.
[/quote]
Yeah, I've been taking a quick peak at the SCSS source, and the tabstrip is considered as a "panel", so your "continuous content" with where it is embedded makes sense. Just a bit different from how we use it.
The "tabstrip/_theme.scss" partial actually defines some color variables at the top of the file, like "$tabstrip-tabs-color: $accent !default;", but then never uses them! Instead, it hardcodes things like "color: $link-text;" instead of using the variable. Comes out to the same color, but makes it much more difficult to create a custom version of Default by redefining those variables and doing an @import. I've created an issue on your github repository, and I've started a fork where I might eventually be able to do a little pull request if I get time to finish it.
I've also created a pull request -- https://github.com/telerik/kendo-theme-default/pull/560.
Lastly, you should checkout https://github.com/telerik/kendo-theme-default/blob/develop/CONTRIBUTING.md and sign the SLA if you want to contribute instead of proposing changes.
Regards,
Ivan Zhekov
Progress Telerik