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.
The Telerik and Kendo UI Classic 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 Classic 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 Classic theme:
Key | Value |
---|---|
Variable: kendo-colors | |
app-surface | #ffffff |
on-app-surface | #272727 |
subtle | #666666 |
surface | #f0f0f0 |
surface-alt | #ffffff |
border | #cacaca |
border-alt | #b6b6b6 |
base-subtle | #f0f0f0 |
base-subtle-hover | #ebebeb |
base-subtle-active | #dddddd |
base | #ebebeb |
base-hover | #dddddd |
base-active | #d6d6d6 |
base-emphasis | #cacaca |
base-on-subtle | #272727 |
on-base | #272727 |
base-on-surface | #272727 |
primary-subtle | #fff2eb |
primary-subtle-hover | #ffe5d6 |
primary-subtle-active | #ffd8c2 |
primary | #f35800 |
primary-hover | #e05100 |
primary-active | #cc4a00 |
primary-emphasis | #ff8b47 |
primary-on-subtle | #3d1600 |
on-primary | #ffffff |
primary-on-surface | #f35800 |
secondary-subtle | #cacaca |
secondary-subtle-hover | #b6b6b6 |
secondary-subtle-active | #a3a3a3 |
secondary | #b6b6b6 |
secondary-hover | #a3a3a3 |
secondary-active | #8f8f8f |
secondary-emphasis | #7a7a7a |
secondary-on-subtle | #272727 |
on-secondary | #000000 |
secondary-on-surface | #8f8f8f |
tertiary-subtle | #9cdffe |
tertiary-subtle-hover | #72d1fe |
tertiary-subtle-active | #49c4fd |
tertiary | #03a9f4 |
tertiary-hover | #039be0 |
tertiary-active | #038ecd |
tertiary-emphasis | #2cbbfd |
tertiary-on-subtle | #01364e |
on-tertiary | #ffffff |
tertiary-on-surface | #0273a6 |
info-subtle | #cce5f3 |
info-subtle-hover | #a6d1ea |
info-subtle-active | #6ab2dc |
info | #007bc3 |
info-hover | #0071b3 |
info-active | #0067a4 |
info-emphasis | #409cd2 |
info-on-subtle | #002b44 |
on-info | #ffffff |
info-on-surface | #005485 |
success-subtle | #bbdfc1 |
success-subtle-hover | #9ed1a6 |
success-subtle-active | #82c48c |
success | #3ea44e |
success-hover | #399748 |
success-active | #348a42 |
success-emphasis | #6ebb7a |
success-on-subtle | #16391b |
on-success | #ffffff |
success-on-surface | #2a7035 |
warning-subtle | #ffdead |
warning-subtle-hover | #ffd699 |
warning-subtle-active | #ffc670 |
warning | #ffa41f |
warning-hover | #ff9800 |
warning-active | #eb8c00 |
warning-emphasis | #ffb240 |
warning-on-subtle | #593500 |
on-warning | #000000 |
warning-on-surface | #ffa41f |
error-subtle | #f4c3b8 |
error-subtle-hover | #f2b4a6 |
error-subtle-active | #ec8e79 |
error | #d92800 |
error-hover | #c82500 |
error-active | #b62200 |
error-emphasis | #e35e40 |
error-on-subtle | #4c0e00 |
on-error | #ffffff |
error-on-surface | #941b00 |
light-subtle | #f0f0f0 |
light-subtle-hover | #ebebeb |
light-subtle-active | #dddddd |
light | #ebebeb |
light-hover | #dddddd |
light-active | #d6d6d6 |
light-emphasis | #cacaca |
light-on-subtle | #272727 |
on-light | #000000 |
light-on-surface | #ebebeb |
dark-subtle | #cacaca |
dark-subtle-hover | #b6b6b6 |
dark-subtle-active | #a3a3a3 |
dark | #404040 |
dark-hover | #333333 |
dark-active | #272727 |
dark-emphasis | #7a7a7a |
dark-on-subtle | #000000 |
on-dark | #ffffff |
dark-on-surface | #333333 |
inverse-subtle | #cacaca |
inverse-subtle-hover | #b6b6b6 |
inverse-subtle-active | #a3a3a3 |
inverse | #404040 |
inverse-hover | #333333 |
inverse-active | #272727 |
inverse-emphasis | #7a7a7a |
inverse-on-subtle | #000000 |
on-inverse | #ffffff |
inverse-on-surface | #333333 |
series-a |
|