New to Kendo UI for Angular? Start a free 30-day trial

Variables overview

All Kendo UI themes rely on Sass variables.

What are Sass variables

A Sass variable is a name with an assigned value. All Sass variables start with $. For more detailed information, take a look at the official Sass docs.

Variables defaults

Each variable in Kendo UI Themes include !default flag - it allows overriding the default variable value. All Kendo UI themes rely on common style rules, and thus share the same set of variables. However, some variables may not need to have a specific value in a particular theme - this is why such variables are set to null in that theme and don't output the property.

Anatomy of the Kendo Themes Variables

When defining variables, we follow patterns in their names for consistency. Depending on its purpose, variable name should contain one of the following words:


  • padding - padding related variable
    $padding-x: 8px !default;
  • spacer - spacing related variable
    $spacer: 1em !default;


  • bg - background color related variable
    $base-bg: #f6f6f6 !default;
  • text - text color related variable
    $base-text: #656565 !default;
  • border - border color, size, style, radius related variable
    $base-border: rgba( black, .08 ) !default;
  • gradient - gradient related variable
    $base-gradient: $base-bg, darken( $base-bg, 2% ) !default;


  • hover, hovered - hover state related variable
    $hovered-bg: #ededed !default;
  • focus, focused - focus state related variable
    $focused-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
  • selected - selected state related variable
    $selected-bg: $primary !default;
  • disabled - disabled state related variable
    $disabled-opacity: .6 !default;

Component specific variables

Each component has a list of its specific variables. They are located in the _variables.scss file in its scss folder. These variables' names start with the component name itself.


List of variables

Below are listed the common variables used in the themes. The complete list of variables can be found here:

$font-sizeBase font size across all components.
$font-familyFont family across all components.
$line-heightLine height used along with $font-size.
$border-radiusBorder radius for all components.
$primaryThe color that focuses the user attention. Used for primary buttons and for elements of primary importance across the theme.
$base-textThe text color of the components' chrome area.
$base-bgThe background of the components' chrome area.
$base-borderThe border color of the components' chrome area.
$base-gradientThe gradient background of the components' chrome area.
$hovered-textThe text color of hovered items.
$hovered-bgThe background of hovered items.
$hovered-borderThe border color of hovered items.
$hovered-gradientThe gradient background of hovered items.
$selected-textThe text color of selected items.
$selected-bgThe background of selected items.
$selected-borderThe border color of selected items.
$selected-gradientThe gradient background of selected items.
$disabled-opacityThe opacity of disabled items.
$errorThe color for error messages and states.
$warningThe color for warning messages and states.
$successThe color for success messages and states.
$infoThe color for informational messages and states.