Variables
The Telerik and Kendo UI Default theme employs multiple variables that you can use to customize the theme.
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 like
$kendo-color-primary,$kendo-color-secondary,$kendo-color-success,$kendo-color-error. - Variables affecting all UI components—For example,
$kendo-component-text,$kendo-component-bg. - 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-component-bg and $kendo-grid-bg variables. In this case, consider that the $kendo-grid-bg variable references $kendo-component-bg.
Here is a quick example on how to customize the Telerik and Kendo UI Default theme:
// Make all inputs components with a different background color
$kendo-input-bg: #f0f0f0;
// Make the border of the grid black and slightly ticker
$kendo-grid-border-width: 2px;
$kendo-grid-border: #000000;
// When you are finished with your customization, import the theme
@import "@progress/kendo-theme-default/dist/all.scss";
// Note: the variables bellow this point will not take effect,
// because the theme is already imported
$kendo-grid-border: red;
List of Variables
The following tables represent the variables in the Telerik and Kendo UI Default theme by the type of styles that they control.
Typography Variables
The typography Sass variables set the styles related to fonts and text.
| Variable | Default Value | Computed Value | Value |
|---|---|---|---|
kendo-font-size | 14px | 14px | Default: 14pxComputed: 14px |
| Description: Base font size across all components. | |||
kendo-font-size-xs | 10px | 10px | Default: 10pxComputed: 10px |
| Description: Extra small font size across all components. | |||
kendo-font-size-sm | 12px | 12px | Default: 12pxComputed: 12px |
| Description: Small font size across all components. | |||
kendo-font-size-md | $kendo-font-size | 14px | Default: $kendo-font-sizeComputed: 14px |
| Description: Medium font size across all components. | |||
kendo-font-size-lg | 16px | 16px | Default: 16pxComputed: 16px |
| Description: Large font size across all components. | |||
kendo-font-size-xl | 20px | 20px | Default: 20pxComputed: 20px |
| Description: Extra large font size across all components. | |||
kendo-font-family-sans-serif | system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" | system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" | Default: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"Computed: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" |
| Description: Font family for text. | |||
kendo-font-family-monospace | SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace | SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace | Default: SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospaceComputed: SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace |
| Description: Font family for monospaced text. Used for styling the code. | |||
kendo-font-family | inherit | inherit | Default: inheritComputed: inherit |
| Description: Font family across all components. | |||
kendo-line-height | k-math-div( 20, 14 ) | 1.4285714286 | Default: k-math-div( 20, 14 )Computed: 1.4285714286 |
| Description: Line height used along with $kendo-font-size. | |||
kendo-line-height-xs | 1 | 1 | Default: 1Computed: 1 |
| Description: Extra small line height used along with $kendo-font-size-xs. | |||
kendo-line-height-sm | 1.25 | 1.25 | Default: 1.25Computed: 1.25 |
| Description: Small line height used along with $kendo-font-size-sm. | |||
kendo-line-height-md | $kendo-line-height | 1.4285714286 | Default: $kendo-line-heightComputed: 1.4285714286 |
| Description: Medium line height used along with $kendo-font-size-md. | |||
kendo-line-height-lg | 1.5 | 1.5 | Default: 1.5Computed: 1.5 |
| Description: Large line height used along with $kendo-font-size-lg. | |||
kendo-font-weight-light | 300 | 300 | Default: 300Computed: 300 |
| Description: Light font weight. | |||
kendo-font-weight-normal | 400 | 400 | Default: 400Computed: 400 |
| Description: Normal font weight. | |||
kendo-font-weight-medium | 500 | 500 | Default: 500Computed: 500 |
| Description: Medium font weight. | |||
kendo-font-weight-semibold | 600 | 600 | Default: 600Computed: 600 |
| Description: Semibold font weight. | |||
kendo-font-weight-bold | 700 | 700 | Default: 700Computed: 700 |
| Description: Bold font weight. | |||
kendo-letter-spacing | null | null | Default: nullComputed: null |
| Description: Letter spacing. | |||
Common Variables
The common Sass variables control a wide range of styles that are not related to a specific UI component.
| Variable | Default Value | Computed Value | Value |
|---|---|---|---|
kendo-icon-size | 16px | 16px | Default: 16pxComputed: 16px |
| Description: Icon size. | |||
kendo-icon-size-xs | calc( #{$kendo-icon-size} * .75 ) | calc(16px * 0.75) | Default: calc( #{$kendo-icon-size} * .75 )Computed: calc(16px * 0.75) |
| Description: xtra small icon size. | |||
kendo-icon-size-sm | calc( #{$kendo-icon-size} * .875 ) | calc(16px * 0.875) | Default: calc( #{$kendo-icon-size} * .875 )Computed: calc(16px * 0.875) |
| Description: Small icon size. | |||
kendo-icon-size-md | $kendo-icon-size | 16px | Default: $kendo-icon-sizeComputed: 16px |
| Description: Medium icon size. | |||
kendo-icon-size-lg | calc( #{$kendo-icon-size} * 1.25 ) | calc(16px * 1.25) | Default: calc( #{$kendo-icon-size} * 1.25 )Computed: calc(16px * 1.25) |
| Description: Large icon size. | |||
kendo-icon-size-xl | calc( #{$kendo-icon-size} * 1.5 ) | calc(16px * 1.5) | Default: calc( #{$kendo-icon-size} * 1.5 )Computed: calc(16px * 1.5) |
| Description: Extra large icon size. | |||
kendo-icon-size-xxl | calc( #{$kendo-icon-size} * 2 ) | calc(16px * 2) | Default: calc( #{$kendo-icon-size} * 2 )Computed: calc(16px * 2) |
| Description: Double extra large icon size. | |||
kendo-icon-size-xxxl | calc( #{$kendo-icon-size} * 3 ) | calc(16px * 3) | Default: calc( #{$kendo-icon-size} * 3 )Computed: calc(16px * 3) |
| Description: Triple extra large icon size. | |||
kendo-padding-x | 8px | 8px | Default: 8pxComputed: 8px |
| Description: Horizontal padding. | |||
kendo-padding-y | 4px | 4px | Default: 4pxComputed: 4px |
| Description: Vertical padding. | |||
kendo-padding-sm-x | k-map-get( $kendo-spacing, 1 ) | 4px | Default: k-map-get( $kendo-spacing, 1 )Computed: 4px |
| Description: Small horizontal padding. | |||
kendo-padding-sm-y | k-map-get( $kendo-spacing, 0.5 ) | 2px | Default: k-map-get( $kendo-spacing, 0.5 )Computed: 2px |
| Description: Small vertical padding. | |||
kendo-padding-md-x | k-map-get( $kendo-spacing, 2 ) | 8px | Default: k-map-get( $kendo-spacing, 2 )Computed: 8px |
| Description: Medium horizontal padding. | |||
kendo-padding-md-y | k-map-get( $kendo-spacing, 1 ) | 4px | Default: k-map-get( $kendo-spacing, 1 )Computed: 4px |
| Description: Medium vertical padding. | |||
kendo-padding-lg-x | k-map-get( $kendo-spacing, 3 ) | 12px | Default: k-map-get( $kendo-spacing, 3 )Computed: 12px |
| Description: Large horizontal padding. | |||
kendo-padding-lg-y | k-map-get( $kendo-spacing, 1.5 ) | 6px | Default: k-map-get( $kendo-spacing, 1.5 )Computed: 6px |
| Description: Large vertical padding. | |||
kendo-border-radius | k-map-get( $kendo-spacing, 1 ) | 4px | Default: k-map-get( $kendo-spacing, 1 )Computed: 4px |
| Description: Border radius for all components. | |||
kendo-border-radius-sm | $kendo-border-radius - k-map-get( $kendo-spacing, 0.5 ) | 2px | Default: $kendo-border-radius - k-map-get( $kendo-spacing, 0.5 )Computed: 2px |
| Description: Small border radius. | |||
kendo-border-radius-md | $kendo-border-radius | 4px | Default: $kendo-border-radiusComputed: 4px |
| Description: Medium border radius. | |||
kendo-border-radius-lg | $kendo-border-radius + k-map-get( $kendo-spacing, 0.5 ) | 6px | Default: $kendo-border-radius + k-map-get( $kendo-spacing, 0.5 )Computed: 6px |
| Description: Large border radius. | |||
kendo-body-bg | $kendo-color-white | #ffffff | Default: $kendo-color-whiteComputed: #ffffff |
| Description: Background color of the body. | |||
kendo-body-text | #424242 | #424242 | Default: #424242Computed: #424242 |
| Description: Text color of the body. | |||
kendo-subtle-text | #666666 | #666666 | Default: #666666Computed: #666666 |
| Description: Subtle text color. | |||
kendo-link-text | $kendo-color-primary | #ff6358 | Default: $kendo-color-primaryComputed: #ff6358 |
| Description: Text color of the links. | |||
kendo-link-hover-text | $kendo-color-primary-darker | #d6534a | Default: $kendo-color-primary-darkerComputed: #d6534a |
| Description: Text color of the links on hover. | |||
Component Variables
The component Sass variables are dedicated to a specific UI component and control its styles.
| Variable | Default Value | Computed Value | Value |
|---|---|---|---|
kendo-component-bg | $kendo-body-bg | #ffffff | Default: $kendo-body-bgComputed: #ffffff |
| Description: Background color of a component. Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$kendo-grid-bg: $kendo-component-bg !default;`. | |||
kendo-component-text | $kendo-body-text | #424242 | Default: $kendo-body-textComputed: #424242 |
| Description: Text color of a component. Note: do not use this variable directly. Instead derive it as `$component-name-text` e.g. `$kendo-grid-text: $kendo-component-text !default;`. | |||
kendo-component-border | rgba(if($kendo-is-dark-theme, $kendo-color-white, $kendo-color-black), 0.08) | rgba(0, 0, 0, 0.08) | Default: rgba(if($kendo-is-dark-theme, $kendo-color-white, $kendo-color-black), 0.08)Computed: rgba(0, 0, 0, 0.08) |
| Description: Border color of a component. Note: do not use this variable directly. Instead derive it as `$component-name-border` e.g. `$kendo-grid-border: $kendo-component-border !default;`. | |||
kendo-component-header-bg | $kendo-base-bg | #fafafa | Default: $kendo-base-bgComputed: #fafafa |
| Description: Background color of the component header. | |||
kendo-component-header-text | $kendo-base-text | #424242 | Default: $kendo-base-textComputed: #424242 |
| Description: Text color of the component header. | |||
kendo-component-header-border | $kendo-base-border | rgba(0, 0, 0, 0.08) | Default: $kendo-base-borderComputed: rgba(0, 0, 0, 0.08) |
| Description: Border color of the component header. | |||
kendo-component-header-gradient | null | null | Default: nullComputed: null |
| Description: Gradient of the component header. | |||
kendo-invalid-bg | null | null | Default: nullComputed: null |
| Description: Background color of the invalid items. | |||
kendo-invalid-text | $kendo-color-error | #f31700 | Default: $kendo-color-errorComputed: #f31700 |
| Description: Text color of the invalid items. | |||
kendo-invalid-border | $kendo-color-error | #f31700 | Default: $kendo-color-errorComputed: #f31700 |
| Description: Border color of the invalid items. | |||
kendo-invalid-shadow | null | null | Default: nullComputed: null |
| Description: Shadow of the invalid items. | |||
kendo-valid-bg | null | null | Default: nullComputed: null |
| Description: Background color of the valid items. | |||
kendo-valid-text | $kendo-color-success | #37b400 | Default: $kendo-color-successComputed: #37b400 |
| Description: Text color of the valid items. | |||
kendo-valid-border | $kendo-color-success | #37b400 | Default: $kendo-color-successComputed: #37b400 |
| Description: Border color of the valid items. | |||
kendo-valid-shadow | null | null | Default: nullComputed: null |
| Description: Shadow of the valid items. | |||
Color-System Variables
The color-system Sass variables control the theme styles related to color.
| Variable | Default Value | Computed Value | Value |
|---|---|---|---|
kendo-color-primary | #ff6358 | #ff6358 | Default: #ff6358Computed: #ff6358 |
| Description: The color that focuses the user attention. Used for primary buttons and for elements of primary importance across the theme. | |||
kendo-color-primary-contrast | k-contrast-legacy($kendo-color-primary) | white | Default: k-contrast-legacy($kendo-color-primary)Computed: white |
| Description: The color used along with the primary color denoted by $kendo-color-primary. Used to provide contrast between the background and foreground colors. | |||
kendo-color-secondary | #666666 | #666666 | Default: #666666Computed: #666666 |
| Description: The secondary color of the theme. | |||
kendo-color-secondary-contrast | k-contrast-legacy($kendo-color-secondary) | white | Default: k-contrast-legacy($kendo-color-secondary)Computed: white |
| Description: The color used along with the secondary color denoted by $kendo-color-secondary. Used to provide contrast between the background and foreground colors. | |||
kendo-color-tertiary | #03a9f4 | #03a9f4 | Default: #03a9f4Computed: #03a9f4 |
| Description: The tertiary color of the theme. | |||
kendo-color-tertiary-contrast | k-contrast-legacy($kendo-color-tertiary) | white | Default: k-contrast-legacy($kendo-color-tertiary)Computed: white |
| Description: The color used along with the tertiary color denoted by $kendo-color-tertiary. Used to provide contrast between the background and foreground colors. | |||
kendo-color-info | #0058e9 | #0058e9 | Default: #0058e9Computed: #0058e9 |
| Description: The color for informational messages and states. | |||
kendo-color-success | #37b400 | #37b400 | Default: #37b400Computed: #37b400 |
| Description: The color for success messages and states. | |||
kendo-color-warning | #ffc000 | #ffc000 | Default: #ffc000Computed: #ffc000 |
| Description: The color for warning messages and states. | |||
kendo-color-error | #f31700 | #f31700 | Default: #f31700Computed: #f31700 |
| Description: The color for error messages and states. | |||
kendo-color-dark | #424242 | #424242 | Default: #424242Computed: #424242 |
| Description: The dark color of the theme. | |||
kendo-color-light | #ebebeb | #ebebeb | Default: #ebebebComputed: #ebebeb |
| Description: The light color of the theme. | |||
kendo-color-inverse | if($kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark) | #424242 | Default: if($kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark)Computed: #424242 |
| Description: Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark | |||
Charts Variables
The Chart Sass variables are specific to the Chart UI component. They do not affect other components.
| Variable | Default Value | Computed Value | Value |
|---|---|---|---|
kendo-series-a | if($kendo-enable-color-system, k-color( series-a ), #ff6358) | #ff6358 | Default: if($kendo-enable-color-system, k-color( series-a ), #ff6358)Computed: #ff6358 |
| Description: The first base series color and its light and dark shades. | |||
kendo-series-b | if($kendo-enable-color-system, k-color( series-b ), #ffe162) | #ffe162 | Default: if($kendo-enable-color-system, k-color( series-b ), #ffe162)Computed: #ffe162 |
| Description: The second base series color and its light and dark shades. | |||
kendo-series-c | if($kendo-enable-color-system, k-color( series-c ), #4cd180) | #4cd180 | Default: if($kendo-enable-color-system, k-color( series-c ), #4cd180)Computed: #4cd180 |
| Description: The third base series color and its light and dark shades. | |||
kendo-series-d | if($kendo-enable-color-system, k-color( series-d ), #4b5ffa) | #4b5ffa | Default: if($kendo-enable-color-system, k-color( series-d ), #4b5ffa)Computed: #4b5ffa |
| Description: The fourth base series color and its light and dark shades. | |||
kendo-series-e | if($kendo-enable-color-system, k-color( series-e ), #ac58ff) | #ac58ff | Default: if($kendo-enable-color-system, k-color( series-e ), #ac58ff)Computed: #ac58ff |
| Description: The fifth base series color and its light and dark shades. | |||
kendo-series-f | if($kendo-enable-color-system, k-color( series-f ), #ff5892) | #ff5892 | Default: if($kendo-enable-color-system, k-color( series-f ), #ff5892)Computed: #ff5892 |
| Description: The sixth base series color and its light and dark shades. | |||
kendo-series-1 | $kendo-series-a | #ff6358 | Default: $kendo-series-aComputed: #ff6358 |
| Description: The series colors in order: base, light, dark, lighter, darker | |||
kendo-chart-major-lines | rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .08 ) | rgba(0, 0, 0, 0.08) | Default: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .08 )Computed: rgba(0, 0, 0, 0.08) |
| Description: The color of the Chart grid lines (major). | |||
kendo-chart-minor-lines | rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .04 ) | rgba(0, 0, 0, 0.04) | Default: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .04 )Computed: rgba(0, 0, 0, 0.04) |
| Description: The color of the Chart grid lines (minor). | |||
