---
title: Theme Variables
position: 2
seo_title: Telerik and Kendo UI Material Theme Variables
seo_description: Learn what Sass variables are used across the Telerik and Kendo
  UI Material theme, what these variables control, and how to modify them to
  customize the default appearance of the theme.
---

## Variables

All Telerik and Kendo UI themes rely on Sass variables to store styling information. For more detailed information about Sass variables, take a look at [the official Sass docs](https://sass-lang.com/documentation/variables).

The Telerik and Kendo UI Material theme employs multiple variables that you can use to customize the theme.

For consistency, the name of each variable follows a pattern. All variables in the Telerik and Kendo UI themes begin with the `kendo-` prefix.
Depending on its purpose, the variable name ends with the following keywords: `colors`, `spacing`, `bg`, `font-size`, `hover`, `focus`, `selected`, `disabled`, and so on.

### Variables by Scope

When it comes to the effect that a specific change in a variable's value causes, variables are not equal. Changing some values will have a much wider impact on the theme than changing others.

Depending on the extent of the styles that each variable controls, the variables fall into three main groups:

* Global variables—They control globally used theme colors and metrics like `$kendo-colors`, `$kendo-spacing`, `$kendo-border-radii`, `$kendo-elevation`.
* Variables affecting individual UI components—For example, `$kendo-grid-bg`, `$kendo-tabstrip-font-size`.

Most component-level variables link to generic variables that are higher in the hierarchy. For instance, you can customize the background of the Grid component both through the `$kendo-colors` map and the `$kendo-grid-bg` variables. In this case, consider that the `$kendo-grid-bg` variable references a value from the `$kendo-colors` map.

### List of Variables

The following tables represent the variables in the Telerik and Kendo UI Material theme by the type of styles that they control.

#### Color Variables

The following table represents the `$kendo-colors` Sass map of the Telerik and Kendo UI Material theme:

<VariableMapList data='{"theme":"material","group":"color-system","name":"kendo-colors"}'></VariableMapList>

#### Spacing Variables

The following table represents the `$kendo-spacing` Sass map of the Telerik and Kendo UI Material theme:

<NewSpacingMapList data='{"theme":"material","group":"spacing","name":"kendo-spacing"}'></NewSpacingMapList>

#### Typography Variables

The following table represents the typography Sass variables of the Telerik and Kendo UI Material theme:

<VariablesList data='{"theme": "material", "group":"typography"}'></VariablesList>

#### Border Radii Variables

The following table represents the `$kendo-border-radii` Sass map of the Telerik and Kendo UI Material theme:

<RadiiList data='{"theme":"material","group":"radii","name":"kendo-border-radii"}'></RadiiList>

#### Elevation Variables

The following table represents the `$kendo-elevation` Sass map of the Telerik and Kendo UI Material theme:

<VariableMapList data='{"theme":"material","group":"elevation","name":"kendo-elevation"}'></VariableMapList>

#### Motion Variables

The following table represents the `$kendo-durations` Sass map of the Telerik and Kendo UI Material theme:

<VariableMapList data='{"theme":"material","group":"motion","name":"kendo-durations"}'></VariableMapList>

The following table represents the `$kendo-easings` Sass map of the Telerik and Kendo UI Material theme:

<VariableMapList data='{"theme":"material","group":"motion","name":"kendo-easings"}'></VariableMapList>

The following table represents the `$kendo-transitions` Sass map of the Telerik and Kendo UI Material theme:

<VariableMapList data='{"theme":"material","group":"motion","name":"kendo-transitions"}'></VariableMapList>