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
-
padding—A padding-related variable.
scss$kendo-padding-x: 8px !default;
Colors
-
bg—A background-color related variable.
scss$kendo-base-bg: #f6f6f6 !default; -
text—A text-color related variable.
scss$kendo-base-text: #656565 !default; -
border—A border color-, size-, style-, and radius-related variable.
scss$kendo-base-border: rgba( black, .08 ) !default; -
gradient—A gradient-related variable.
scss$kendo-base-gradient: $kendo-base-bg, darken( $kendo-base-bg, 2% ) !default;
States
-
hover, hovered—A hover-state related variable.
scss$kendo-hovered-bg: #ededed !default; -
focus, focused—A focus-state related variable.
scss$kendo-focused-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default; -
selected—A selected-state related variable.
scss$kendo-selected-bg: $kendo-color-primary !default; -
disabled—A disabled-state related variable.
scss$kendo-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.
$kendo-grid-padding-x;
$kendo-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.
| Name | Description |
|---|---|
| $kendo-font-size | The base font size across all components. |
| $kendo-font-family | The font family across all components. |
| $kendo-line-height | The line height used along with $font-size. |
| $kendo-border-radius | The border radius for all components. |
| $kendo-color-primary | The color that focuses the user attention. Used for primary buttons and for elements of primary importance across the theme. |
| $kendo-base-text | The text color of the components' chrome area. |
| $kendo-base-bg | The background of the components' chrome area. |
| $kendo-base-border | The border color of the components' chrome area. |
| $kendo-base-gradient | The gradient background of the components' chrome area. |
| $kendo-hovered-text | The text color of hovered items. |
| $kendo-hovered-bg | The background of hovered items. |
| $kendo-hovered-border | The border color of hovered items. |
| $kendo-hovered-gradient | The gradient background of hovered items. |
| $kendo-selected-text | The text color of selected items. |
| $kendo-selected-bg | The background of selected items. |
| $kendo-selected-border | The border color of selected items. |
| $kendo-selected-gradient | The gradient background of selected items. |
| $kendo-disabled-opacity | The opacity of disabled items. |
| $kendo-color-error | The color for error messages and states. |
| $kendo-color-warning | The color for warning messages and states. |
| $kendo-color-success | The color for success messages and states. |
| $kendo-color-info | The color for informational messages and states. |