Using common variables with kendo theme swatches

[Antti]

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"
    }
}

[Magdalena]

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

[Antti]

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?

[Magdalena]

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