Using common variables with kendo theme swatches

2 Answers 34 Views
General Discussions Styling
Antti
Top achievements
Rank 1
Antti asked on 16 Aug 2022, 09:19 AM | edited on 16 Aug 2022, 10:51 AM

Hi,

I have been testing what's the best way to create custom theme swatches, so that they're easy to maintain between Kendo upgrades.

Is it possible somehow to use theme variables inside the json file (of the swatch)?

Here is an example, where I try to use "$component-border" to set border color for tabs:

"name": "Tabstrip",
"variables": {
    "tabstrip-item-border": {
        "name": "Tabstrip item border color",
        "type": "color",
        "value": "$component-border !default"
    }
}

 

When running "npm run sass:swatches", it gives me error message: "Error: Undefined variable: "$component-border"."

It works if I hard code the color like this:

"name": "Tabstrip",
"variables": {
    "tabstrip-item-border": {
        "name": "Tabstrip item border color",
        "type": "color",
        "value": "#fc0303"
    }
}

2 Answers, 1 is accepted

Sort by
0
Magdalena
Telerik team
answered on 19 Aug 2022, 08:37 AM

Hi Antti,

Actually, the $component-border is a sass variable. To change the value of a sass variable, you can follow this article. In your case, if you would like to modify the tabstrip border color, you can specify the $tabstrip-border variable before importing the theme file (point 4 in the article).

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

Antti
Top achievements
Rank 1
commented on 19 Aug 2022, 08:58 AM

Thanks Magdalena,

yes I see that we can modify .scss files to use the variables, but I was hoping to use them for our custom swatch only. It would keep the base theme intact, and our modifications in the .json file.

I guess there is no other way to customize the swatch except editing the .json, which takes hardcoded values?
0
Magdalena
Telerik team
answered on 23 Aug 2022, 12:18 PM

Hello Antti,

Themes variables are accessible only in the described sass files so it is not possible to use them in JSON files of swatches. If you would like to change the border color of tabstrip only for an exact swatch, you can set it in the swatch scss file.

Regards,
Magdalena
Progress Telerik

The Premier Dev Conference is back! 

Coming to you live from Progress360 in-person or on your own time, DevReach for all. Register Today.


Tags
General Discussions Styling
Asked by
Antti
Top achievements
Rank 1
Answers by
Magdalena
Telerik team
Share this question
or