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

SASS 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 which allows you to override 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. That is why such variables are set to null in that theme and don't output the property.

Anatomy of the Kendo UI Themes Variables

When defining variables, the Kendo UI themes follow patterns in their names for consistency. Depending on its purpose, a variable name has to contain one of the following words.

Metrics

  • paddingA padding-related variable.

        $padding-x: 8px !default;
  • spacerA spacing-related variable.

        $spacer: 1em !default;

Colors

  • bgA background-color related variable.

        $base-bg: #f6f6f6 !default;
  • textA text-color related variable.

        $base-text: #656565 !default;
  • borderA border color-, size-, style-, and radius-related variable.

        $base-border: rgba( black, .08 ) !default;
  • gradientA gradient-related variable.

        $base-gradient: $base-bg, darken( $base-bg, 2% ) !default;

States

  • hover, hoveredA hover-state related variable.

        $hovered-bg: #ededed !default;
  • focus, focusedA focus-state related variable.

        $focused-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
  • selectedA selected-state related variable.

        $selected-bg: $primary !default;
  • disabledA 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 the scss folder of the component. The names of these variables start with the component name itself.

    $grid-padding-x;
    $grid-padding-y;

List of Variables

The following list contains the common variables that are used in the themes. For the complete list of variables, refer to https://github.com/telerik/kendo-themes/blob/develop/packages/default/scss/_variables.scss.

NameDescription
$font-sizeThe base font size across all components.
$font-familyThe font family across all components.
$line-heightThe line height used along with $font-size.
$border-radiusThe border 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.