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

Customization

Variables

The following table lists the available variables for customizing the Nouvelle theme.

Common

NameTypeDefault valueComputed value
$kendo-interactive-bgColor#f6f6f6#f6f6f6
Description
The background of the components' chrome area.
$kendo-interactive-textColor#656565#656565
Description
The text color of the components' chrome area.
$kendo-interactive-borderColorrgba( black, .08 )rgba(0, 0, 0, 0.08)
Description
The border color of the components' chrome area.
$kendo-interactive-gradientListrgba( black, 0 ), rgba( black, .02 )rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02)
Description
The gradient background of the components' chrome area.
$kendo-hover-bgColork-color-shade( $kendo-component-bg, .5 )whitesmoke
Description
The background of hovered items.
$kendo-hover-textColor$kendo-component-text#494949
Description
The text color of hover items.
$kendo-hover-borderColorrgba( black, .15 )rgba(0, 0, 0, 0.15)
Description
The border color of hover items.
$kendo-hover-gradientListrgba( black, 0 ), rgba( black, .02 )rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02)
Description
The gradient background of hover items.
$kendo-selected-bgColor$kendo-color-primary#622331
Description
The background of selected items.
$kendo-selected-textColork-contrast-color( $kendo-selected-bg )white
Description
The text color of selected items.
$kendo-selected-borderColorrgba( black, .1 )rgba(0, 0, 0, 0.1)
Description
The border color of selected items.
$kendo-selected-gradientStringnonenone
Description
The gradient background of selected items.

Accessibility

NameTypeDefault valueComputed value
$wcag-min-contrast-ratioNumber74.5
Description
The contrast ratio to reach against white, to determine if color changes from "light" to "dark".
Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
$wcag-darkColorblackblack
Description
Default dark color for WCAG 2.0.
$wcag-lightColorwhitewhite
Description
Default light color for WCAG 2.0.

Actions

NameTypeDefault valueComputed value
$kendo-actions-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
Horizontal padding of actions container.
$kendo-actions-padding-yStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
Vertical padding of actions container.
$kendo-actions-border-widthList0 0 0 00 0 0 0
Description
Width of the border around actions container.
$kendo-actions-bgNullnullnull
Description
Background color of actions container.
$kendo-actions-textNullnullnull
Description
Text color of actions container.
$kendo-actions-borderNullnullnull
Description
Border color of actions container.
$kendo-actions-spacingStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
Spacing between items in actions container

Actions-list

NameTypeDefault valueComputed value
$kendo-actions-list-spacingStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
Spacing between items in actions list

Avatar

NameTypeDefault valueComputed value
$kendo-avatar-border-widthNumber1px1px
Description
Border width of the avatar.
$kendo-avatar-font-familyString$kendo-font-familyinherit
Description
Font family of the avatar.
$kendo-avatar-font-sizeNumber$kendo-font-size-md1rem
Description
Font size of the avatar.
$kendo-avatar-line-heightNumber$kendo-line-height-md1.5
Description
Line height of the avatar.
$kendo-avatar-sizesMap( sm: k-spacing(4), md: k-spacing(8), lg: k-spacing(16) )(sm: var(--kendo-spacing-4, 1rem), md: var(--kendo-spacing-8, 2rem), lg: var(--kendo-spacing-16, 4rem))
Description
The sizes of the avatar.
$kendo-avatar-themeMapk-process-variant-matrices( $kendo-avatar-theme-matrix, $kendo-avatar-palette-matrix )(solid-neutral: (bg: #ededed, text: #494949, border: #ededed, gradient: null, shadow: null, outline: null), solid-inverse: (bg: #494949, text: #ffffff, border: #494949, gradient: null, shadow: null, outline: null), solid-primary: (bg: #622331, text: #ffffff, border: #622331, gradient: null, shadow: null, outline: null), solid-info: (bg: #0969da, text: #ffffff, border: #0969da, gradient: null, shadow: null, outline: null), solid-success: (bg: #1a7f37, text: #ffffff, border: #1a7f37, gradient: null, shadow: null, outline: null), solid-warning: (bg: #bc4c00, text: #ffffff, border: #bc4c00, gradient: null, shadow: null, outline: null), solid-error: (bg: #cf222e, text: #ffffff, border: #cf222e, gradient: null, shadow: null, outline: null), outline-neutral: (bg: transparent, text: #767676, border: #767676, gradient: null, shadow: null, outline: null), outline-inverse: (bg: transparent, text: #494949, border: #494949, gradient: null, shadow: null, outline: null), outline-primary: (bg: transparent, text: #622331, border: #622331, gradient: null, shadow: null, outline: null), outline-info: (bg: transparent, text: #0969da, border: #0969da, gradient: null, shadow: null, outline: null), outline-success: (bg: transparent, text: #1a7f37, border: #1a7f37, gradient: null, shadow: null, outline: null), outline-warning: (bg: transparent, text: #bc4c00, border: #bc4c00, gradient: null, shadow: null, outline: null), outline-error: (bg: transparent, text: #cf222e, border: #cf222e, gradient: null, shadow: null, outline: null))
Description
Theme colors map of the avatar.

Badge

NameTypeDefault valueComputed value
$kendo-badge-border-widthNumber1px1px
Description
Border width of the badge.
$kendo-badge-font-familyString$kendo-font-familyinherit
Description
Font family of the badge.
$kendo-badge-font-weightNullnullnull
Description
Font weight of the badge.
$kendo-badge-sm-padding-xStringk-spacing(0.5)var(--kendo-spacing-0\.5, 0.125rem)
Description
Horizontal padding of the badge.
$kendo-badge-sm-padding-yStringk-spacing(0.5)var(--kendo-spacing-0\.5, 0.125rem)
Description
Vertical padding of the badge.
$kendo-badge-sm-font-sizeNumber$kendo-font-size-xs0.75rem
Description
Font sizes of the badge.
$kendo-badge-sm-line-heightNullnullnull
Description
Line heights of the badge.
$kendo-badge-sm-min-widthCalculationcalc( #{$kendo-badge-sm-line-height} * 1em + #{$kendo-badge-sm-padding-y} * 2 + #{$kendo-badge-border-width} * 2 )calc( * 1em + var(--kendo-spacing-0\.5, 0.125rem) * 2 + 1px * 2)
Description
Badge min width used for circle badge.
$kendo-badge-sizesMap( sm: ( padding-x: $kendo-badge-sm-padding-x, padding-y: $kendo-badge-sm-padding-y, font-size: $kendo-badge-sm-font-size, line-height: $kendo-badge-sm-line-height, min-width: $kendo-badge-sm-min-width ), md: ( padding-x: $kendo-badge-md-padding-x, padding-y: $kendo-badge-md-padding-y, font-size: $kendo-badge-md-font-size, line-height: $kendo-badge-md-line-height, min-width: $kendo-badge-md-min-width ), lg: ( padding-x: $kendo-badge-lg-padding-x, padding-y: $kendo-badge-lg-padding-y, font-size: $kendo-badge-lg-font-size, line-height: $kendo-badge-lg-line-height, min-width: $kendo-badge-lg-min-width ) )(sm: (padding-x: var(--kendo-spacing-0\.5, 0.125rem), padding-y: var(--kendo-spacing-0\.5, 0.125rem), font-size: 0.75rem, line-height: null, min-width: calc( * 1em + var(--kendo-spacing-0\.5, 0.125rem) * 2 + 1px * 2)), md: (padding-x: var(--kendo-spacing-1, 0.25rem), padding-y: var(--kendo-spacing-1, 0.25rem), font-size: 0.875rem, line-height: null, min-width: calc( * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 1px * 2)), lg: (padding-x: var(--kendo-spacing-1\.5, 0.375rem), padding-y: var(--kendo-spacing-1\.5, 0.375rem), font-size: 1rem, line-height: null, min-width: calc( * 1em + var(--kendo-spacing-1\.5, 0.375rem) * 2 + 1px * 2)))
Description
Size map for the badge.
$kendo-badge-themeMapk-process-variant-matrices( $kendo-badge-theme-matrix, $kendo-badge-palette-matrix )(solid-neutral: (bg: #ededed, text: #494949, border: #ededed, gradient: null, shadow: null, outline: null), solid-inverse: (bg: #494949, text: #ffffff, border: #494949, gradient: null, shadow: null, outline: null), solid-primary: (bg: #622331, text: #ffffff, border: #622331, gradient: null, shadow: null, outline: null), solid-info: (bg: #0969da, text: #ffffff, border: #0969da, gradient: null, shadow: null, outline: null), solid-success: (bg: #1a7f37, text: #ffffff, border: #1a7f37, gradient: null, shadow: null, outline: null), solid-warning: (bg: #bc4c00, text: #ffffff, border: #bc4c00, gradient: null, shadow: null, outline: null), solid-error: (bg: #cf222e, text: #ffffff, border: #cf222e, gradient: null, shadow: null, outline: null), outline-neutral: (bg: transparent, text: #767676, border: #767676, gradient: null, shadow: null, outline: null), outline-inverse: (bg: transparent, text: #494949, border: #494949, gradient: null, shadow: null, outline: null), outline-primary: (bg: transparent, text: #622331, border: #622331, gradient: null, shadow: null, outline: null), outline-info: (bg: transparent, text: #0969da, border: #0969da, gradient: null, shadow: null, outline: null), outline-success: (bg: transparent, text: #1a7f37, border: #1a7f37, gradient: null, shadow: null, outline: null), outline-warning: (bg: transparent, text: #bc4c00, border: #bc4c00, gradient: null, shadow: null, outline: null), outline-error: (bg: transparent, text: #cf222e, border: #cf222e, gradient: null, shadow: null, outline: null))
Description
Theme colors map of the badge.

Bottom-nav

NameTypeDefault valueComputed value
$kendo-bottom-nav-shadowNullnullnull
Description
Box shadow of the bottom navigation.
$kendo-bottom-nav-item-focus-offsetNullnullnull
Description
Offset of the focused bottom navigation item.
$kendo-bottom-nav-item-focus-outline-widthNumber1px1px
Description
Outline width of the focused bottom navigation item.
$kendo-bottom-nav-item-focus-outline-styleStringsolidsolid
Description
Outline style of the focused bottom navigation item.
$kendo-bottom-nav-item-icon-margin-xNullnullnull
Description
Horizontal margin of the focused bottom navigation item icon.
$kendo-bottom-nav-item-icon-margin-yNullnullnull
Description
Vertical margin of the focused bottom navigation item icon.

Bottom-navigation

NameTypeDefault valueComputed value
$kendo-bottom-nav-padding-xNullnullnull
Description
Horizontal padding of the bottom navigation.
$kendo-bottom-nav-padding-yNullnullnull
Description
Vertical padding of the bottom navigation.
$kendo-bottom-nav-gapNullnullnull
Description
Spacing of the bottom navigation.
$kendo-bottom-nav-border-widthNullnullnull
Description
Border width of the bottom navigation.
$kendo-bottom-nav-font-familyString$kendo-font-familyinherit
Description
Font family of the bottom navigation.
$kendo-bottom-nav-font-sizeNullnullnull
Description
Font size of the bottom navigation.
$kendo-bottom-nav-line-heightNullnullnull
Description
Line height of the bottom navigation.
$kendo-bottom-nav-item-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
Horizontal padding of the bottom navigation item.
$kendo-bottom-nav-item-padding-yStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
Vertical padding of the bottom navigation item.
$kendo-bottom-nav-item-min-widthNumber72px72px
Description
Minimum width of the bottom navigation item.
$kendo-bottom-nav-item-max-widthStringnonenone
Description
Maximum width of the bottom navigation item.
$kendo-bottom-nav-item-border-radiusNullnullnull
Description
Border radius of the bottom navigation item.
$kendo-bottom-nav-item-gapStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
Spacing of the bottom navigation item.

Breadcrumb

NameTypeDefault valueComputed value
$kendo-breadcrumb-border-widthNumber0px0px
Description
The width of the border around the Breadcrumb.
$kendo-breadcrumb-margin-xNullnullnull
Description
The horizontal margin of the Breadcrumb.
$kendo-breadcrumb-margin-yNullnullnull
Description
The vertical margin of the Breadcrumb.
$kendo-breadcrumb-padding-xNullnullnull
Description
The horizontal padding of the Breadcrumb.
$kendo-breadcrumb-padding-yNullnullnull
Description
The vertical padding of the Breadcrumb.
$kendo-breadcrumb-font-familyString$kendo-font-familyinherit
Description
The font family of the Breadcrumb.
$kendo-breadcrumb-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the Breadcrumb.
$kendo-breadcrumb-sm-font-sizeNumber$kendo-font-size-sm0.875rem
Description
The font size of the small Breadcrumb.
$kendo-breadcrumb-md-font-sizeNumber$kendo-breadcrumb-font-size1rem
Description
The font size of the medium Breadcrumb.
$kendo-breadcrumb-lg-font-sizeNumber$kendo-font-size-lg1.25rem
Description
The font size of the large Breadcrumb.
$kendo-breadcrumb-line-heightNumber$kendo-line-height-md1.5
Description
The line-height of the Breadcrumb.
$kendo-breadcrumb-sm-line-heightNumber$kendo-line-height-md1.5
Description
The line-height of the small Breadcrumb.
$kendo-breadcrumb-md-line-heightNumber$kendo-breadcrumb-line-height1.5
Description
The line-height of the medium Breadcrumb.
$kendo-breadcrumb-lg-line-heightNumber$kendo-line-height-lg1.75
Description
The line-height of the height Breadcrumb.
$kendo-breadcrumb-focus-shadowNull$kendo-focus-shadownull
Description
The box shadow of the focused Breadcrumb.
$kendo-breadcrumb-link-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the Breadcrumb link.
$kendo-breadcrumb-sm-link-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the small Breadcrumb link.
$kendo-breadcrumb-md-link-padding-xString$kendo-breadcrumb-link-padding-xvar(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the medium Breadcrumb link.
$kendo-breadcrumb-lg-link-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the large Breadcrumb link.
$kendo-breadcrumb-link-padding-yStringk-spacing(1.5)var(--kendo-spacing-1\.5, 0.375rem)
Description
The vertical padding of the Breadcrumb link.
$kendo-breadcrumb-sm-link-padding-yStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The vertical padding of the small Breadcrumb link.
$kendo-breadcrumb-md-link-padding-yString$kendo-breadcrumb-link-padding-yvar(--kendo-spacing-1\.5, 0.375rem)
Description
The vertical padding of the medium Breadcrumb link.
$kendo-breadcrumb-lg-link-padding-yStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the large Breadcrumb link.
$kendo-breadcrumb-link-border-radiusNumberk-map-get( $kendo-border-radii, md )0.25rem
Description
The border-radius of the Breadcrumb link.
$kendo-breadcrumb-icon-link-padding-yStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the Breadcrumb link icon.
$kendo-breadcrumb-sm-icon-link-padding-yStringk-spacing(1.5)var(--kendo-spacing-1\.5, 0.375rem)
Description
The vertical padding of the small Breadcrumb link icon.
$kendo-breadcrumb-md-icon-link-padding-yString$kendo-breadcrumb-icon-link-padding-yvar(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the medium Breadcrumb link icon.
$kendo-breadcrumb-lg-icon-link-padding-yStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The vertical padding of the large Breadcrumb link icon.
$kendo-breadcrumb-icon-link-padding-xString$kendo-breadcrumb-icon-link-padding-yvar(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the Breadcrumb link icon.
$kendo-breadcrumb-sm-icon-link-padding-xString$kendo-breadcrumb-sm-icon-link-padding-yvar(--kendo-spacing-1\.5, 0.375rem)
Description
The horizontal padding of the small Breadcrumb link icon.
$kendo-breadcrumb-md-icon-link-padding-xString$kendo-breadcrumb-icon-link-padding-xvar(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the medium Breadcrumb link icon.
$kendo-breadcrumb-lg-icon-link-padding-xString$kendo-breadcrumb-lg-icon-link-padding-yvar(--kendo-spacing-3, 0.75rem)
Description
The horizontal padding of the large Breadcrumb link icon.
$kendo-breadcrumb-link-icon-spacingString$kendo-icon-spacingk-spacing(2)
Description
The spacing of the Breadcrumb link icon.
$kendo-breadcrumb-link-focus-shadowNull$kendo-focus-shadownull
Description
The box shadow of the focused Breadcrumb link.
$kendo-breadcrumb-sizesMap( sm: ( link-padding-x: $kendo-breadcrumb-sm-link-padding-x, link-padding-y: $kendo-breadcrumb-sm-link-padding-y, icon-link-padding-x: $kendo-breadcrumb-sm-icon-link-padding-x, icon-link-padding-y: $kendo-breadcrumb-sm-icon-link-padding-y, font-size: $kendo-breadcrumb-sm-font-size, line-height: $kendo-breadcrumb-sm-line-height ), md: ( link-padding-x: $kendo-breadcrumb-md-link-padding-x, link-padding-y: $kendo-breadcrumb-md-link-padding-y, icon-link-padding-x: $kendo-breadcrumb-md-icon-link-padding-x, icon-link-padding-y: $kendo-breadcrumb-md-icon-link-padding-y, font-size: $kendo-breadcrumb-md-font-size, line-height: $kendo-breadcrumb-md-line-height ), lg: ( link-padding-x: $kendo-breadcrumb-lg-link-padding-x, link-padding-y: $kendo-breadcrumb-lg-link-padding-y, icon-link-padding-x: $kendo-breadcrumb-lg-icon-link-padding-x, icon-link-padding-y: $kendo-breadcrumb-lg-icon-link-padding-y, font-size: $kendo-breadcrumb-lg-font-size, line-height: $kendo-breadcrumb-lg-line-height ) )(sm: (link-padding-x: var(--kendo-spacing-2, 0.5rem), link-padding-y: var(--kendo-spacing-1, 0.25rem), icon-link-padding-x: var(--kendo-spacing-1\.5, 0.375rem), icon-link-padding-y: var(--kendo-spacing-1\.5, 0.375rem), font-size: 0.875rem, line-height: 1.5), md: (link-padding-x: var(--kendo-spacing-2, 0.5rem), link-padding-y: var(--kendo-spacing-1\.5, 0.375rem), icon-link-padding-x: var(--kendo-spacing-2, 0.5rem), icon-link-padding-y: var(--kendo-spacing-2, 0.5rem), font-size: 1rem, line-height: 1.5), lg: (link-padding-x: var(--kendo-spacing-2, 0.5rem), link-padding-y: var(--kendo-spacing-2, 0.5rem), icon-link-padding-x: var(--kendo-spacing-3, 0.75rem), icon-link-padding-y: var(--kendo-spacing-3, 0.75rem), font-size: 1.25rem, line-height: 1.75))
Description
The sizes map for the Breadcrumb.

Captcha

NameTypeDefault valueComputed value
$kendo-captcha-widthNumber280px280px
Description
The width of the Captcha.
$kendo-captcha-font-familyString$kendo-font-familyinherit
Description
The font family of the Captcha.
$kendo-captcha-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the Captcha.
$kendo-captcha-line-heightNumber$kendo-line-height-md1.5
Description
The line height of the Captcha.
$kendo-captcha-spacingStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The spacing of the Captcha.
$kendo-captcha-bgColor$kendo-component-bg#ffffff
Description
The background color of the Captcha.
$kendo-captcha-textColor$kendo-component-text#494949
Description
The text color of the Captcha.
$kendo-captcha-borderColor$kendo-component-border#ededed
Description
The border color of the Captcha.
$kendo-captcha-image-wrap-spacingStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The spacing of the Captcha image wrapper.
$kendo-captcha-image-controls-spacingStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The spacing of the Captcha image controls.
$kendo-captcha-validation-offset-yStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The offset of the Captcha validation message.
$kendo-captcha-validation-font-sizeNumber$kendo-font-size-sm0.875rem
Description
The font size of the Captcha validation message.

Card

NameTypeDefault valueComputed value
$kendo-card-padding-xNullnullnull
Description
Horizontal padding of the card.
$kendo-card-padding-yNullnullnull
Description
Vertical padding of the card.
$kendo-card-border-widthNumber1px1px
Description
Width of the border around the card.
$kendo-card-border-radiusNumberk-map-get( $kendo-border-radii, md )0.25rem
Description
Border radius of the card.
$kendo-card-font-familyNullnullnull
Description
Font family of the card.
$kendo-card-font-sizeNullnullnull
Description
Font size of the card.
$kendo-card-line-heightNullnullnull
Description
Line height of the card.
$kendo-card-deck-gapStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
Spacing between the cards in the card deck.
$kendo-card-bgColor$kendo-component-bg#ffffff
Description
Background color of the card.
$kendo-card-textColor$kendo-component-text#494949
Description
Text color of the card.
$kendo-card-borderColor$kendo-component-border#ededed
Description
Border color of the card.
$kendo-card-shadowNullnullnull
Description
Shadow of the card.
$kendo-card-focus-bgColor$kendo-card-bg#ffffff
Description
Background color of the card when focused.
$kendo-card-focus-textNullnullnull
Description
Text color of the card when focused.
$kendo-card-focus-borderNullnullnull
Description
Border color of the card when focused.
$kendo-card-focus-shadowNullnullnull
Description
Shadow of the card when focused.
$kendo-card-header-padding-xStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
Horizontal padding of the card header.
$kendo-card-header-padding-yStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
Vertical padding of the card header.
$kendo-card-header-border-widthNullnullnull
Description
Bottom border width of the card header.
$kendo-card-header-font-weightNullnullnull
Description
Text weight of the card header.
$kendo-card-header-bgColork-get-theme-color( neutral, 50 )#f8f8f8
Description
Background color of the card header.
$kendo-card-header-textColor$kendo-card-text#494949
Description
Text color of the card header.
$kendo-card-header-borderColor$kendo-card-border#ededed
Description
Border color of the card header.
$kendo-card-body-padding-xStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
Horizontal padding of the card body.
$kendo-card-body-padding-yStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
Vertical padding of the card body.
$kendo-card-footer-padding-xStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
Horizontal padding of the card footer.
$kendo-card-footer-padding-yStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
Vertical padding of the card footer.
$kendo-card-footer-border-widthNullnullnull
Description
Top border width of the card footer.
$kendo-card-footer-bgNullnullnull
Description
Background color of the card footer.
$kendo-card-footer-textNullnullnull
Description
Text color of the card footer.
$kendo-card-footer-borderColor$kendo-card-border#ededed
Description
Border color of the card footer.
$kendo-card-title-margin-bottomStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
Bottom margin of the card title.
$kendo-card-title-font-weightNullnullnull
Description
Font weight of the card title.
$kendo-card-title-textNullnullnull
Description
Text color of the card subtitle.
$kendo-card-subtitle-margin-bottomStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
Bottom margin of the card subtitle.
$kendo-card-subtitle-font-weightNullnullnull
Description
Font weight of the card title.
$kendo-card-subtitle-textColor$kendo-subtle-text#5f5f5f
Description
Text color of the card subtitle.
$kendo-card-img-max-widthNumber100px100px
Description
Maximum width of the card image.
$kendo-card-avatar-sizeNumber3rem3rem
Description
Size of the avatar in the card.
$kendo-card-actions-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
Horizontal padding of the card actions.
$kendo-card-actions-padding-yStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
Vertical padding of the card actions.
$kendo-card-actions-border-widthNullnullnull
Description
Top border of the card actions.
$kendo-card-actions-gapStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
Spacing between the card actions.
$kendo-card-deck-scroll-button-radiusNullnullnull
Description
Border radius of the scroll button in the card deck.
$kendo-card-callout-sizeNumber20px20px
Description
Size of the card callout.

Checkbox

NameTypeDefault valueComputed value
$kendo-checkbox-border-radiusNullnullnull
Description
Border radius of checkbox
$kendo-checkbox-border-widthNumber1px1px
Description
Border width of checkbox.
$kendo-checkbox-bgColor$kendo-component-bg#ffffff
Description
Background color of checkbox.
$kendo-checkbox-textNullnullnull
Description
Color of checkbox.
$kendo-checkbox-borderColor$kendo-component-border#ededed
Description
Border color of checkbox.
$kendo-checkbox-hover-bgNullnullnull
Description
Background color of hovered checkbox.
$kendo-checkbox-hover-textNullnullnull
Description
Color of hovered checkbox.
$kendo-checkbox-hover-borderNullnullnull
Description
Border color of hovered checkbox.
$kendo-checkbox-focus-borderNullnullnull
Description
Border color of focused checkbox.
$kendo-checkbox-focus-shadowNullnullnull
Description
Box shadow of focused checkbox.
$kendo-checkbox-focus-outlineNullnullnull
Description
The outline of a focused checkbox.
$kendo-checkbox-checked-bgColor$kendo-color-primary#622331
Description
Background color of checked checkbox.
$kendo-checkbox-checked-textColork-contrast-color( $kendo-checkbox-checked-bg )white
Description
Color of checked checkbox.
$kendo-checkbox-checked-borderColor$kendo-checkbox-checked-bg#622331
Description
Border color of checked checkbox.
$kendo-checkbox-hover-checked-bgNullnullnull
Description
Background of hovered and checked checkbox.
$kendo-checkbox-hover-checked-textNullnullnull
Description
Color of checked checkbox.
$kendo-checkbox-hover-checked-borderNullnullnull
Description
Border of hovered and checked checkbox.
$kendo-checkbox-indeterminate-bgColor$kendo-checkbox-checked-bg#622331
Description
Background color of indeterminate checkbox.
$kendo-checkbox-indeterminate-textColor$kendo-checkbox-checked-textwhite
Description
Color of indeterminate checkbox.
$kendo-checkbox-indeterminate-borderColor$kendo-checkbox-checked-border#622331
Description
Border color of indeterminate checkbox.
$kendo-checkbox-hover-indeterminate-bgNullnullnull
Description
Background color of hovered and indeterminate checkbox.
$kendo-checkbox-hover-indeterminate-textNullnullnull
Description
Background color of hovered and indeterminate checkbox.
$kendo-checkbox-hover-indeterminate-borderNullnullnull
Description
Border color of hovered and indeterminate checkbox.
$kendo-checkbox-disabled-bgNullnullnull
Description
Background color of disabled checkbox.
$kendo-checkbox-disabled-textNullnullnull
Description
Color of disabled checkbox.
$kendo-checkbox-disabled-borderNullnullnull
Description
Border color of disabled checkbox.
$kendo-checkbox-disabled-checked-bgNullnullnull
Description
Background color of disabled and checked checkbox.
$kendo-checkbox-disabled-checked-textNullnullnull
Description
Color of disabled and checked checkbox.
$kendo-checkbox-disabled-checked-borderNullnullnull
Description
Border color of disabled and checked checkbox.
$kendo-checkbox-disabled-indeterminate-bgNullnullnull
Description
Background color of disabled and indeterminate checkbox.
$kendo-checkbox-disabled-indeterminate-textNullnullnull
Description
Border color of disabled and indeterminate checkbox.
$kendo-checkbox-disabled-indeterminate-borderNullnullnull
Description
Border color of disabled and indeterminate checkbox.
$kendo-checkbox-invalid-bgColor$kendo-checkbox-bg#ffffff
Description
Background color of invalid checkbox.
$kendo-checkbox-invalid-textColor$kendo-invalid-text#cf222e
Description
Color of invalid checkbox.
$kendo-checkbox-invalid-borderColor$kendo-invalid-border#cf222e
Description
Border color of invalid checkbox.
$kendo-checkbox-indicator-typeStringglyphglyph
Description
Type of checkbox indicator.
$kendo-checkbox-glyph-font-familyList"WebComponentsIcons", monospace"WebComponentsIcons", monospace
Description
Glyph font family of checkbox indicator.
$kendo-checkbox-checked-glyphString"\e118""\e118"
Description
Glyph of checkbox indicator.
$kendo-checkbox-indeterminate-glyphString"\e121""\e121"
Description
Glyph of indeterminate checkbox indicator.
$kendo-checkbox-imageNullnullnull
Description
Image of checkbox indicator.
$kendo-checkbox-hover-imageNullnullnull
Description
Image of hovered checkbox indicator.
$kendo-checkbox-checked-imageNullnullnull
Description
Image of checked checkbox indicator.
$kendo-checkbox-indeterminate-imageNullnullnull
Description
Image of indeterminate checkbox indicator.
$kendo-checkbox-hover-checked-imageNullnullnull
Description
Image of hovered and checked checkbox indicator.
$kendo-checkbox-hover-indeterminate-imageNullnullnull
Description
Image of hovered and indeterminate checkbox indicator.
$kendo-checkbox-disabled-checked-imageNullnullnull
Description
Image of checked checkbox indicator.
$kendo-checkbox-disabled-indeterminate-imageNullnullnull
Description
Image of indeterminate checkbox indicator.
$kendo-checkbox-list-spacingStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
Spacing between items of horizontal checkbox list.
$kendo-checkbox-list-item-padding-xNullnullnull
Description
Horizontal padding of checkbox list items.
$kendo-checkbox-list-item-padding-yNullnullnull
Description
Vertical padding of checkbox list items.
$kendo-checkbox-list-item-spacingNullnullnull
Description
Spacing between checkbox and text.
$kendo-checkbox-ripple-bgColor$kendo-color-primary#622331
Description
Background color of checkbox ripple.
$kendo-checkbox-ripple-opacityNumber.250.25
Description
Opacity of checkbox ripple.

Chip

NameTypeDefault valueComputed value
$kendo-chip-border-widthNumber1px1px
Description
Width of the border around the button.
$kendo-chip-font-familyNullnullnull
Description
The font family of the chip.
$kendo-chip-list-sizesMap( sm: ( spacing: k-spacing(1) ), md: ( spacing: k-spacing(1) ), lg: ( spacing: k-spacing(1) ) )(sm: (spacing: var(--kendo-spacing-1, 0.25rem)), md: (spacing: var(--kendo-spacing-1, 0.25rem)), lg: (spacing: var(--kendo-spacing-1, 0.25rem)))
Description
The sizes of the chip list.

Color System

NameTypeDefault valueComputed value
$kendo-color-whiteColor#ffffff#ffffff
Description
The color white.
Note: you cannot change this value.
$kendo-color-blackColor#000000#000000
Description
The color black.
Note: you cannot change this value.
$kendo-color-primaryColor#622331#622331
Description
The color that focuses the user attention.
Used for primary buttons and for elements of primary importance across the theme.
$kendo-color-primary-contrastColork-contrast-color( $kendo-color-primary )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-infoColor#0969da#0969da
Description
The color for informational messages and states.
$kendo-color-successColor#1a7f37#1a7f37
Description
The color for success messages and states.
$kendo-color-warningColor#bc4c00#bc4c00
Description
The color for warning messages and states.
$kendo-color-errorColor#cf222e#cf222e
Description
The color for error messages and states.
$kendo-color-darkColor#404040#404040
Description
The dark color of the theme.
$kendo-color-lightColor#ebebeb#ebebeb
Description
The light color of the theme.
$kendo-color-inverseColorif( $kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark )#404040
Description
Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark
$kendo-color-rgba-transparentColorrgba(0, 0, 0, 0)rgba(0, 0, 0, 0)
Description
The color transparent.
Note: you cannot change this value.
$kendo-gradient-transparent-to-blackGradientrgba(black, 0), blackrgba(0, 0, 0, 0), black
Description
A gradient that goes from transparent to black.
Note: you cannot change this value.
$kendo-gradient-transparent-to-whiteGradientrgba(white, 0), whitergba(255, 255, 255, 0), white
Description
A gradient that goes from transparent to white.
Note: you cannot change this value.
$kendo-gradient-black-to-transparentGradientblack, rgba(black, 0)black, rgba(0, 0, 0, 0)
Description
A gradient that goes from black to transparent.
Note: you cannot change this value.
$kendo-gradient-white-to-transparentGradientwhite, rgba(white, 0)white, rgba(255, 255, 255, 0)
Description
A gradient that goes from white to transparent.
Note: you cannot change this value.
$kendo-gradient-rainbowGradient#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000
Description
A gradient that cycles through the colors of the rainbow.
Note: you cannot change this value.
$kendo-colorsMap$_default-colors(app-surface: null, on-app-surface: null, subtle: null, surface: null, surface-alt: null, border: null, border-alt: null, base-subtle: null, base-subtle-hover: null, base-subtle-active: null, base: null, base-hover: null, base-active: null, base-emphasis: null, base-on-subtle: null, on-base: null, base-on-surface: null, primary-subtle: null, primary-subtle-hover: null, primary-subtle-active: null, primary: null, primary-hover: null, primary-active: null, primary-emphasis: null, primary-on-subtle: null, on-primary: null, primary-on-surface: null, secondary-subtle: null, secondary-subtle-hover: null, secondary-subtle-active: null, secondary: null, secondary-hover: null, secondary-active: null, secondary-emphasis: null, secondary-on-subtle: null, on-secondary: null, secondary-on-surface: null, tertiary-subtle: null, tertiary-subtle-hover: null, tertiary-subtle-active: null, tertiary: null, tertiary-hover: null, tertiary-active: null, tertiary-emphasis: null, tertiary-on-subtle: null, on-tertiary: null, tertiary-on-surface: null, info-subtle: null, info-subtle-hover: null, info-subtle-active: null, info: null, info-hover: null, info-active: null, info-emphasis: null, info-on-subtle: null, on-info: null, info-on-surface: null, success-subtle: null, success-subtle-hover: null, success-subtle-active: null, success: null, success-hover: null, success-active: null, success-emphasis: null, success-on-subtle: null, on-success: null, success-on-surface: null, warning-subtle: null, warning-subtle-hover: null, warning-subtle-active: null, warning: null, warning-hover: null, warning-active: null, warning-emphasis: null, warning-on-subtle: null, on-warning: null, warning-on-surface: null, error-subtle: null, error-subtle-hover: null, error-subtle-active: null, error: null, error-hover: null, error-active: null, error-emphasis: null, error-on-subtle: null, on-error: null, error-on-surface: null, light-subtle: null, light-subtle-hover: null, light-subtle-active: null, light: null, light-hover: null, light-active: null, light-emphasis: null, light-on-subtle: null, on-light: null, light-on-surface: null, dark-subtle: null, dark-subtle-hover: null, dark-subtle-active: null, dark: null, dark-hover: null, dark-active: null, dark-emphasis: null, dark-on-subtle: null, on-dark: null, dark-on-surface: null, inverse-subtle: null, inverse-subtle-hover: null, inverse-subtle-active: null, inverse: null, inverse-hover: null, inverse-active: null, inverse-emphasis: null, inverse-on-subtle: null, on-inverse: null, inverse-on-surface: null, series-a: null, series-a-bold: null, series-a-bolder: null, series-a-subtle: null, series-a-subtler: null, series-b: null, series-b-bold: null, series-b-bolder: null, series-b-subtle: null, series-b-subtler: null, series-c: null, series-c-bold: null, series-c-bolder: null, series-c-subtle: null, series-c-subtler: null, series-d: null, series-d-bold: null, series-d-bolder: null, series-d-subtle: null, series-d-subtler: null, series-e: null, series-e-bold: null, series-e-bolder: null, series-e-subtle: null, series-e-subtler: null, series-f: null, series-f-bold: null, series-f-bolder: null, series-f-subtle: null, series-f-subtler: null)
Description
The global default Colors map.

Component

NameTypeDefault valueComputed value
$kendo-component-bgColork-get-theme-color( neutral, 0 )#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-textColork-get-theme-color( neutral, 700 )#494949
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-borderColork-get-theme-color( neutral, 100 )#ededed
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;`.

Elevation

NameTypeDefault valueComputed value
$kendo-elevationMap$_default-elevation(1: (0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12)), 2: (0 4px 6px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.12)), 3: (0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12)), 4: (0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12)), 5: (0 10px 12px rgba(0, 0, 0, 0.16), 0 4px 16px rgba(0, 0, 0, 0.12)), 6: (0 12px 14px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.12)), 7: (0 14px 16px rgba(0, 0, 0, 0.24), 0 4px 16px rgba(0, 0, 0, 0.12)), 8: (0 16px 18px rgba(0, 0, 0, 0.28), 0 4px 16px rgba(0, 0, 0, 0.12)), 9: (0 32px 34px rgba(0, 0, 0, 0.32), 0 4px 16px rgba(0, 0, 0, 0.12)))
Description
The global default Elevation map.

Icon

NameTypeDefault valueComputed value
$kendo-icon-sizeNumber1rem16px
Description
Font size of the icons.
$kendo-icon-size-mdNumber1rem16px
Description
Font size of the icons.
$kendo-icon-size-lgCalculation1.25remcalc(16px * 1.25)
Description
Font size of the large icons.
$kendo-icon-spacingStringk-spacing(1)k-spacing(2)
Description
Spacing around the icons.

List

NameTypeDefault valueComputed value
$kendo-list-bgColor$kendo-component-bg#ffffff
Description
The background of the list.
$kendo-list-textColor$kendo-component-text#494949
Description
The text color of the list.
$kendo-list-borderColor$kendo-component-border#ededed
Description
The border color of the list.

Popup

NameTypeDefault valueComputed value
$kendo-popup-bgColor$kendo-component-bg#ffffff
Description
The background of the popup.
$kendo-popup-textColor$kendo-component-text#494949
Description
The text color of the popup.
$kendo-popup-borderColor$kendo-component-border#ededed
Description
The border color of the popup.

Progressbar

NameTypeDefault valueComputed value
$kendo-progressbar-inline-sizeNullnullnull
Description
Inline size of the progressbar. Width when horizontal, height when vertical.
$kendo-progressbar-block-sizeNullnullnull
Description
Block size of the progressbar. Height when horizontal, width when vertical.
$kendo-progressbar-border-widthNullnullnull
Description
Border width of the progressbar.
$kendo-progressbar-border-radiusNullnullnull
Description
Border radius of the progressbar.
$kendo-progressbar-font-familyNullnullnull
Description
Font family of the progressbar.
$kendo-progressbar-font-sizeNullnullnull
Description
Font size of the progressbar.
$kendo-progressbar-line-heightNullnullnull
Description
Line height of the progressbar.
$kendo-progressbar-animation-timingList1s linear infinite1s linear infinite
Description
Animation timing of the progressbar.
$kendo-progressbar-status-padding-xNullnullnull
Description
Inline padding of the progressbar status.
$kendo-progressbar-status-padding-yNullnullnull
Description
Block padding of the progressbar status.
$kendo-progressbar-bgColork-try-shade( $kendo-component-bg, 1 )#ebebeb
Description
Background color of the progressbar.
$kendo-progressbar-textColor$kendo-component-text#494949
Description
Text color of the progressbar.
$kendo-progressbar-borderColor$kendo-component-border#ededed
Description
Border color of the progressbar.
$kendo-progressbar-gradientNullnullnull
Description
Background gradient of the progressbar.
$kendo-progressbar-value-bgColor$kendo-color-primary#622331
Description
Progress background color of the progressbar.
$kendo-progressbar-value-textColork-contrast-legacy( $kendo-progressbar-value-bg )white
Description
Progress text color of the progressbar.
$kendo-progressbar-value-borderColork-try-shade( $kendo-progressbar-value-bg )#5a202d
Description
Progress border color of the progressbar.
$kendo-progressbar-value-gradientNullnullnull
Description
Progress background gradient of the progressbar.
$kendo-progressbar-indeterminate-bgColor$kendo-progressbar-bg#ebebeb
Description
Background color of the indeterminate progressbar.
$kendo-progressbar-indeterminate-textColor$kendo-progressbar-text#494949
Description
Text color of the indeterminate progressbar.
$kendo-progressbar-indeterminate-borderColor$kendo-progressbar-border#ededed
Description
Border color of the indeterminate progressbar.
$kendo-progressbar-indeterminate-gradientNullnullnull
Description
Background gradient of the indeterminate progressbar.
$kendo-progressbar-chunk-borderColor$kendo-body-bg#ffffff
Description
Border color of the chunk progressbar.
$kendo-circular-progressbar-arc-strokeColor$kendo-color-primary#622331
Description
Arc stroke color of the circular progressbar.
$kendo-circular-progressbar-scale-strokeColor$kendo-progressbar-bg#ebebeb
Description
Scale stroke background color of the circular progressbar.
$kendo-progressbar-themeMap( DEFAULT: ( bg: k-get-theme-color( neutral, 100 ), text: k-get-theme-color( neutral, 700 ), border: k-get-theme-color( neutral, 200 ), value-bg: k-get-theme-color( marsala, 500 ), value-text: k-get-theme-color( marsala, 0 ), value-border: k-get-theme-color( marsala, 500 ) ) )(DEFAULT: (bg: #ededed, text: #494949, border: #d6d6d6, value-bg: #622331, value-text: #ffffff, value-border: #622331))
Description
Theme colors map of the progressbar.

Radii

NameTypeDefault valueComputed value
$kendo-border-radius-noneNumberk-map-get($kendo-spacing, 0)0
Description
The none border radius used across the Components.
$kendo-border-radius-xsNumberk-map-get($kendo-spacing, 1px)1px
Description
The extra small border radius used across the Components.
$kendo-border-radius-smNumberk-map-get($kendo-spacing, 0.5)0.125rem
Description
The small border radius used across the Components.
$kendo-border-radius-mdNumberk-map-get($kendo-spacing, 1)0.25rem
Description
The medium border radius used across the Components.
$kendo-border-radius-lgNumberk-map-get($kendo-spacing, 1.5)0.375rem
Description
The large border radius used across the Components.
$kendo-border-radius-xlNumberk-map-get($kendo-spacing, 2)0.5rem
Description
The extra large border radius used across the Components.
$kendo-border-radius-xxlNumberk-map-get($kendo-spacing, 3)0.75rem
Description
The third largest border radius used across the Components.
$kendo-border-radius-xxxlNumberk-map-get($kendo-spacing, 4)1rem
Description
The second largest border radius used across the Components.
$kendo-border-radius-fullNumber9999px9999px
Description
The largest border radius used across the Components.
$kendo-border-radiiMapk-map-merge($_default-border-radii, $kendo-border-radii)(none: 0, xs: 1px, sm: 0.125rem, md: 0.25rem, lg: 0.5rem, xl: 0.5rem, xxl: 0.75rem, xxxl: 1rem, full: 9999px, DEFAULT: 0.25rem, 0: 0)
Description
The global radii Map.

Radio

NameTypeDefault valueComputed value
$kendo-radio-border-radiusNumber50%50%
Description
Border radius of radio button.
$kendo-radio-border-widthNumber1px1px
Description
Border width of radio.
$kendo-radio-bgColor$kendo-component-bg#ffffff
Description
Background color of radio.
$kendo-radio-textNullnullnull
Description
Color of radio.
$kendo-radio-borderColor$kendo-component-border#ededed
Description
Border color of radio.
$kendo-radio-hover-bgNullnullnull
Description
Background color of hovered radio.
$kendo-radio-hover-textNullnullnull
Description
Color of hovered radio.
$kendo-radio-hover-borderNullnullnull
Description
Border color of hovered radio.
$kendo-radio-focus-borderNullnullnull
Description
Border color of focused radio.
$kendo-radio-focus-shadowNullnullnull
Description
Box shadow of focused radio.
$kendo-radio-focus-outlineNullnullnull
Description
The outline of a focused radio.
$kendo-radio-checked-bgColor$kendo-color-primary#622331
Description
Background color of checked radio.
$kendo-radio-checked-textColork-contrast-color( $kendo-radio-checked-bg )white
Description
Color of checked radio.
$kendo-radio-checked-borderColor$kendo-radio-checked-bg#622331
Description
Border color of checked radio.
$kendo-radio-hover-checked-bgNullnullnull
Description
Background of hovered and checked radio.
$kendo-radio-hover-checked-textNullnullnull
Description
Color of checked radio.
$kendo-radio-hover-checked-borderNullnullnull
Description
Border of hovered and checked radio.
$kendo-radio-disabled-bgNullnullnull
Description
Background color of disabled radio.
$kendo-radio-disabled-textNullnullnull
Description
Color of disabled radio.
$kendo-radio-disabled-borderNullnullnull
Description
Border color of disabled radio.
$kendo-radio-disabled-checked-bgNullnullnull
Description
Background color of disabled and checked radio.
$kendo-radio-disabled-checked-textNullnullnull
Description
Color of disabled and checked radio.
$kendo-radio-disabled-checked-borderNullnullnull
Description
Border color of disabled and checked radio.
$kendo-radio-invalid-bgColor$kendo-radio-bg#ffffff
Description
Background color of invalid radio.
$kendo-radio-invalid-textColor$kendo-invalid-text#cf222e
Description
Color of invalid radio.
$kendo-radio-invalid-borderColor$kendo-invalid-border#cf222e
Description
Border color of invalid radio.
$kendo-radio-indicator-typeStringpseudopseudo
Description
Type of radio indicator.
$kendo-radio-indicator-border-radiusNumber50%50%
Description
Border radius radio button indicator.
$kendo-radio-glyph-font-familyList"WebComponentsIcons", monospace"WebComponentsIcons", monospace
Description
Glyph font family of radio indicator.
$kendo-radio-checked-glyphString"\e308""\e308"
Description
Glyph of radio indicator.
$kendo-radio-imageNullnullnull
Description
Image of radio indicator.
$kendo-radio-hover-imageNullnullnull
Description
Image of hovered radio indicator.
$kendo-radio-checked-imageNullnullnull
Description
Image of checked radio indicator.
$kendo-radio-hover-checked-imageNullnullnull
Description
Image of hovered and checked radio indicator.
$kendo-radio-disabled-checked-imageNullnullnull
Description
Image of checked radio indicator.
$kendo-radio-list-spacingStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
Spacing between items of horizontal radio list.
$kendo-radio-list-item-padding-xNullnullnull
Description
Horizontal padding of radio list items.
$kendo-radio-list-item-padding-yNullnullnull
Description
Vertical padding of radio list items.
$kendo-radio-list-item-spacingNullnullnull
Description
Spacing between radio and text.
$kendo-radio-ripple-bgColor$kendo-color-primary#622331
Description
Background color of radio ripple.
$kendo-radio-ripple-opacityNumber.250.25
Description
Opacity of radio ripple.

Skeleton

NameTypeDefault valueComputed value
$kendo-skeleton-text-transformStringscale( 1, .6 )scale(1, 0.6)
Description
The transform scale of the Skeleton text.
$kendo-skeleton-text-border-radiusNumberk-map-get( $kendo-border-radii, md )0.25rem
Description
The border radius of the Skeleton text.
$kendo-skeleton-rect-border-radiusNumberk-map-get( $kendo-border-radii, md )0.25rem
Description
The border radius of the rectangular Skeleton.
$kendo-skeleton-circle-border-radiusNumber9999px9999px
Description
The border radius of the circular Skeleton.
$kendo-skeleton-item-bgColork-get-theme-color( neutral, 100 )#ededed
Description
The background color of the Skeleton item.
$kendo-skeleton-wave-bgColork-get-theme-color( neutral, 50 )#f8f8f8
Description
The background color of the Skeleton wave animation.

Slider

NameTypeDefault valueComputed value
$kendo-slider-inline-sizeNumber20em20em
Description
The default slider size.
$kendo-slider-block-sizeNumber22px22px
Description
The default slider track wrap size.
$kendo-slider-spacingStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The spacing of the slider.
$kendo-slider-font-familyNullnullnull
Description
Font family of the slider.
$kendo-slider-font-sizeNumber$kendo-font-size-md1rem
Description
Font size of the slider.
$kendo-slider-line-heightNumber$kendo-line-height-md1.5
Description
Line height of the slider.
$kendo-slider-track-sizeStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The size of the slider track.
$kendo-slider-track-border-radiusStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The border radius of the slider track.
$kendo-slider-thumb-sizeStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The default size of the slider thumb.
$kendo-slider-thumb-border-widthStringk-spacing(0.5)var(--kendo-spacing-0\.5, 0.125rem)
Description
The default border width of the slider thumb.
$kendo-slider-thumb-border-radiusNumber9999px9999px
Description
The border radius of the slider thumb.
$kendo-slider-thumb-active-scaleNullnullnull
Description
The active transition scale of the slider thumb.
$kendo-slider-thumb-active-sizeNullnullnull
Description
The active size of the slider thumb.
$kendo-slider-transition-speedNumber.3s0.3s
Description
The transition speed of the slider.
$kendo-slider-transition-functionStringease-outease-out
Description
The transition function function.
$kendo-slider-thumb-transition-speedNumber.4s0.4s
Description
The transition speed of the slider thumb.
$kendo-slider-thumb-transition-functionStringcubic-bezier(.25, .8, .25, 1)cubic-bezier(0.25, 0.8, 0.25, 1)
Description
The transition function of the slider thumb.

Spacing

NameTypeDefault valueComputed value
$kendo-spacingMap$_default-spacing(0: 0, 1px: 1px, 0.5: 0.125rem, 1: 0.25rem, 1.5: 0.375rem, 2: 0.5rem, 2.5: 0.625rem, 3: 0.75rem, 3.5: 0.875rem, 4: 1rem, 4.5: 1.125rem, 5: 1.25rem, 5.5: 1.375rem, 6: 1.5rem, 6.5: 1.625rem, 7: 1.75rem, 7.5: 1.875rem, 8: 2rem, 9: 2.25rem, 10: 2.5rem, 11: 2.75rem, 12: 3rem, 13: 3.25rem, 14: 3.5rem, 15: 3.75rem, 16: 4rem, 17: 4.25rem, 18: 4.5rem, 19: 4.75rem, 20: 5rem, 21: 5.25rem, 22: 5.5rem, 23: 5.75rem, 24: 6rem, 25: 7rem, 26: 8rem, 27: 9rem, 28: 10rem, 29: 11rem, 30: 12rem)
Description
The global default Spacing map.

Switch

NameTypeDefault valueComputed value
$kendo-switch-font-familyNullnullnull
Description
Font family of the switch.
$kendo-switch-track-border-widthNumber1px1px
Description
Border width of the switch track.
$kendo-switch-thumb-border-widthNumber00
Description
Border width of the switch thumb.
$kendo-switch-label-text-transformStringuppercaseuppercase
Description
Text transform of the switch label.
$kendo-switch-label-displayStringnonenone
Description
Display of the switch label.
$kendo-switch-sizesMap( sm: ( font-size: $kendo-font-size-sm, track-width: 36px, track-height: 16px, thumb-width: 10px, thumb-height: 10px, thumb-offset: 3px, label-offset: 4px ), md: ( font-size: $kendo-font-size-sm, track-width: 40px, track-height: 20px, thumb-width: 12px, thumb-height: 12px, thumb-offset: 4px, label-offset: 5px ), lg: ( font-size: $kendo-font-size-sm, track-width: 44px, track-height: 24px, thumb-width: 14px, thumb-height: 14px, thumb-offset: 5px, label-offset: 6px ) )(sm: (font-size: 0.875rem, track-width: 36px, track-height: 16px, thumb-width: 10px, thumb-height: 10px, thumb-offset: 3px, label-offset: 4px), md: (font-size: 0.875rem, track-width: 40px, track-height: 20px, thumb-width: 12px, thumb-height: 12px, thumb-offset: 4px, label-offset: 5px), lg: (font-size: 0.875rem, track-width: 44px, track-height: 24px, thumb-width: 14px, thumb-height: 14px, thumb-offset: 5px, label-offset: 6px))
Description
Map with the different switch sizes.

Table

NameTypeDefault valueComputed value
$kendo-table-border-widthNumber1px1px
Description
The width of the table border.
$kendo-table-cell-vertical-border-widthNumber1px1px
Description
The width of vertical border of table cells.
$kendo-table-cell-horizontal-border-widthNumber1px1px
Description
The width of horizontal border of table cells.
$kendo-table-header-font-weightNullnullnull
Description
Font weight of the table header cells.
$kendo-table-sizesMap( sm: ( font-size: $kendo-font-size-sm, line-height: $kendo-line-height-sm, cell-padding-x: $kendo-table-sm-cell-padding-x, cell-padding-y: $kendo-table-sm-cell-padding-y, group-row-padding-x: 0, group-row-padding-y: $kendo-table-sm-cell-padding-y, group-label-padding-x: k-spacing(2), group-label-padding-y: k-spacing(1), group-label-font-size: .875em ), md: ( font-size: $kendo-font-size-md, line-height: $kendo-line-height-md, cell-padding-x: $kendo-table-md-cell-padding-x, cell-padding-y: $kendo-table-md-cell-padding-y, group-row-padding-x: 0, group-row-padding-y: $kendo-table-md-cell-padding-y, group-label-padding-x: k-spacing(2), group-label-padding-y: k-spacing(1), group-label-font-size: .875em ), lg: ( font-size: $kendo-font-size-lg, line-height: $kendo-line-height-lg, cell-padding-x: $kendo-table-lg-cell-padding-x, cell-padding-y: $kendo-table-lg-cell-padding-y, group-row-padding-x: 0, group-row-padding-y: $kendo-table-lg-cell-padding-y, group-label-padding-x: k-spacing(2), group-label-padding-y: k-spacing(1), group-label-font-size: .875em ) )(sm: (font-size: 0.875rem, line-height: 1.25, cell-padding-x: var(--kendo-spacing-2, 0.5rem), cell-padding-y: var(--kendo-spacing-1, 0.25rem), group-row-padding-x: 0, group-row-padding-y: var(--kendo-spacing-1, 0.25rem), group-label-padding-x: var(--kendo-spacing-2, 0.5rem), group-label-padding-y: var(--kendo-spacing-1, 0.25rem), group-label-font-size: 0.875em), md: (font-size: 1rem, line-height: 1.5, cell-padding-x: var(--kendo-spacing-3, 0.75rem), cell-padding-y: var(--kendo-spacing-1, 0.25rem), group-row-padding-x: 0, group-row-padding-y: var(--kendo-spacing-1, 0.25rem), group-label-padding-x: var(--kendo-spacing-2, 0.5rem), group-label-padding-y: var(--kendo-spacing-1, 0.25rem), group-label-font-size: 0.875em), lg: (font-size: 1.25rem, line-height: 1.75, cell-padding-x: var(--kendo-spacing-3, 0.75rem), cell-padding-y: var(--kendo-spacing-1, 0.25rem), group-row-padding-x: 0, group-row-padding-y: var(--kendo-spacing-1, 0.25rem), group-label-padding-x: var(--kendo-spacing-2, 0.5rem), group-label-padding-y: var(--kendo-spacing-1, 0.25rem), group-label-font-size: 0.875em))
Description
The sizes of the table.

Tabstrip

NameTypeDefault valueComputed value
$kendo-tabstrip-wrapper-padding-xNullnullnull
Description
The horizontal padding of the tabstrip wrapper
$kendo-tabstrip-wrapper-padding-yNullnullnull
Description
The vertical padding of the tabstrip wrapper
$kendo-tabstrip-wrapper-border-widthNullnullnull
Description
The width of the border around the tabstrip wrapper
$kendo-tabstrip-font-familyNullnullnull
Description
The font family of the tabstrip
$kendo-tabstrip-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the tabstrip
$kendo-tabstrip-line-heightNumber$kendo-line-height-md1.5
Description
The line height of the tabstrip
$kendo-tabstrip-border-widthNumber1px1px
Description
The width of the border around the tabstrip
$kendo-tabstrip-spacingNullnullnull
Description
The space between the tabstrip items
$kendo-tabstrip-item-padding-xStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the tabstrip item
$kendo-tabstrip-item-padding-yStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the tabstrip item
$kendo-tabstrip-item-border-widthNumber1px1px
Description
The width of the border around the tabstrip item
$kendo-tabstrip-item-border-styleStringsolidsolid
Description
The style of the border around the tabstrip item
$kendo-tabstrip-item-border-radiusNumberk-map-get( $kendo-border-radii, md )0.25rem
Description
The border radius of the tabstrip item
$kendo-tabstrip-item-focus-shadowList$kendo-list-item-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.8)
Description
The focus shadow of the tabstrip item
$kendo-tabstrip-indicator-sizeStringk-spacing(0.5)var(--kendo-spacing-0\.5, 0.125rem)
Description
The border width of the tabstrip indicator
$kendo-tabstrip-indicator-colorStringk-get-theme-color-var( primary-100 )var(--kendo-primary-100, inherit)
Description
The border color of the tabstrip ripple
$kendo-tabstrip-content-padding-xStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The horizontal padding of tabstrip content
$kendo-tabstrip-content-padding-yStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The vertical padding of tabstrip content
$kendo-tabstrip-content-border-widthNumber1px1px
Description
The width of border around tabstrip content
$kendo-tabstrip-content-border-styleStringsolidsolid
Description
The style of border around tabstrip content
$kendo-tabstrip-scrollable-button-padding-xStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The horizontal button padding of the scrollable tabstrip
$kendo-tabstrip-scrollable-button-padding-yStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)

Toolbar

NameTypeDefault valueComputed value
$kendo-toolbar-border-widthNumber1px1px
Description
Width of the border around the toolbar.
$kendo-toolbar-font-familyNullnullnull
Description
Font family of the toolbar.
$kendo-toolbar-font-sizeNumber$kendo-font-size-md1rem
Description
Font size of the toolbar.
$kendo-toolbar-line-heightNumber$kendo-line-height-md1.5
Description
Line height of the toolbar.
$kendo-toolbar-input-widthNumber10em10em
Description
The width of the input in the toolbar.
$kendo-toolbar-item-focus-outline-widthNumber1px1px
Description
Border width of the focused toolbar item.
$kendo-toolbar-item-focus-outline-styleStringsolidsolid
Description
Border style of the focused toolbar item.
$kendo-toolbar-sizesMap( sm: ( padding-x: $kendo-toolbar-sm-padding-x, padding-y: $kendo-toolbar-sm-padding-y, spacing: $kendo-toolbar-sm-spacing ), md: ( padding-x: $kendo-toolbar-md-padding-x, padding-y: $kendo-toolbar-md-padding-y, spacing: $kendo-toolbar-md-spacing ), lg: ( padding-x: $kendo-toolbar-lg-padding-x, padding-y: $kendo-toolbar-lg-padding-y, spacing: $kendo-toolbar-lg-spacing ) )(sm: (padding-x: var(--kendo-spacing-1, 0.25rem), padding-y: var(--kendo-spacing-1, 0.25rem), spacing: var(--kendo-spacing-1, 0.25rem)), md: (padding-x: var(--kendo-spacing-2, 0.5rem), padding-y: var(--kendo-spacing-2, 0.5rem), spacing: var(--kendo-spacing-2, 0.5rem)), lg: (padding-x: 0.625rem, padding-y: 0.625rem, spacing: var(--kendo-spacing-2, 0.5rem)))
Description
Sizes map for the toolbar.

Tooltip

NameTypeDefault valueComputed value
$kendo-tooltip-border-radiusNumberk-map-get( $kendo-border-radii, md )0.25rem
Description
The radius of the border around the tooltip
$kendo-tooltip-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the tooltip
$kendo-tooltip-padding-yStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the tooltip
$kendo-tooltip-border-widthNumber0px0px
Description
The width of the border around the tooltip
$kendo-tooltip-font-familyNullnullnull
Description
The font family of the tooltip
$kendo-tooltip-font-sizeNumber$kendo-font-size-sm0.875rem
Description
The font size of the tooltip
$kendo-tooltip-line-heightNumber$kendo-line-height-sm1.25
Description
The line height of the tooltip
$kendo-tooltip-title-marginStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The margin of the tooltip title
$kendo-tooltip-title-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the tooltip title
$kendo-tooltip-title-line-heightNumber$kendo-line-height-md1.5
Description
The line height of the tooltip title
$kendo-tooltip-title-font-weightStringnormalnormal
Description
The went weight of the tooltip title
$kendo-tooltip-callout-sizeStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The size of the tooltip callout

Treeview

NameTypeDefault valueComputed value
$kendo-treeview-font-familyNullnullnull
Description
Font family of the treeview component.
$kendo-treeview-sizesMap( sm: ( font-size: $kendo-font-size-sm, line-height: $kendo-line-height-sm, filter-padding-x: k-spacing(1), filter-padding-y: k-spacing(1), indent: k-spacing(4), icon-spacing: k-spacing(1), checkbox-spacing: k-spacing(1), item-padding-x: k-spacing(2), item-padding-y: k-spacing(1), item-border-radius: k-spacing(0.5) ), md: ( font-size: $kendo-font-size-md, line-height: $kendo-line-height-md, filter-padding-x: k-spacing(2), filter-padding-y: k-spacing(2), indent: k-spacing(4), icon-spacing: k-spacing(1), checkbox-spacing: k-spacing(1), item-padding-x: k-map-get( $kendo-spacing, 2.5 ), item-padding-y: k-spacing(1.5), item-border-radius: k-spacing(1) ), lg: ( font-size: $kendo-font-size-lg, line-height: $kendo-line-height-lg, filter-padding-x: k-spacing(3), filter-padding-y: k-spacing(3), indent: k-spacing(4), icon-spacing: k-spacing(1), checkbox-spacing: k-spacing(1), item-padding-x: k-spacing(3), item-padding-y: k-spacing(2), item-border-radius: k-spacing(2) ) )(sm: (font-size: 0.875rem, line-height: 1.25, filter-padding-x: var(--kendo-spacing-1, 0.25rem), filter-padding-y: var(--kendo-spacing-1, 0.25rem), indent: var(--kendo-spacing-4, 1rem), icon-spacing: var(--kendo-spacing-1, 0.25rem), checkbox-spacing: var(--kendo-spacing-1, 0.25rem), item-padding-x: var(--kendo-spacing-2, 0.5rem), item-padding-y: var(--kendo-spacing-1, 0.25rem), item-border-radius: var(--kendo-spacing-0\.5, 0.125rem)), md: (font-size: 1rem, line-height: 1.5, filter-padding-x: var(--kendo-spacing-2, 0.5rem), filter-padding-y: var(--kendo-spacing-2, 0.5rem), indent: var(--kendo-spacing-4, 1rem), icon-spacing: var(--kendo-spacing-1, 0.25rem), checkbox-spacing: var(--kendo-spacing-1, 0.25rem), item-padding-x: 0.625rem, item-padding-y: var(--kendo-spacing-1\.5, 0.375rem), item-border-radius: var(--kendo-spacing-1, 0.25rem)), lg: (font-size: 1.25rem, line-height: 1.75, filter-padding-x: var(--kendo-spacing-3, 0.75rem), filter-padding-y: var(--kendo-spacing-3, 0.75rem), indent: var(--kendo-spacing-4, 1rem), icon-spacing: var(--kendo-spacing-1, 0.25rem), checkbox-spacing: var(--kendo-spacing-1, 0.25rem), item-padding-x: var(--kendo-spacing-3, 0.75rem), item-padding-y: var(--kendo-spacing-2, 0.5rem), item-border-radius: var(--kendo-spacing-2, 0.5rem)))
Description
The sizes of the treeview.

Typography

NameTypeDefault valueComputed value
$kendo-font-size-xsNumber.75rem0.75rem
Description
Base font size across all components.
$kendo-font-family-sans-serifListsystem-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"
Description
Font family for text.
$kendo-font-family-monospaceListSFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospaceSFMono-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-familyStringnullinherit
Description
Font family across all components.
$kendo-line-height-smNumber1.251.25
Description
Line height used along with $kendo-font-size.
$kendo-font-sizeNumber0.875rem0.875rem
Description
The base font size across all components.
$kendo-font-size-xxsNumber0.5rem0.5rem
Description
The extra extra small font size across all components.
$kendo-font-size-smNumber0.75rem0.875rem
Description
The small font size across all components.
$kendo-font-size-mdNumber$kendo-font-size1rem
Description
The medium font size across all components.
$kendo-font-size-lgNumber1rem1.25rem
Description
The large font size across all components.
$kendo-font-size-xlNumber1.25rem1.5rem
Description
The extra large font size across all components.
$kendo-line-heightNumberk-math-div( 20, 14 )1.4285714286
Description
The base line height across all components.
$kendo-line-height-xsNumber11
Description
The extra small line height across all components.
$kendo-line-height-mdNumber$kendo-line-height1.5
Description
The medium line height across all components.
$kendo-line-height-lgNumber1.51.75
Description
The large line height across all components.
$kendo-line-height-emCalculationcalc( #{$kendo-line-height-md} * 1em )calc(1.5 * 1em)
Description
The base line height in ems across all components.
$kendo-font-weightNumber400400
Description
The base font weight across all components.
$kendo-font-weight-thinNumber100100
Description
The thin font weight across all components.
$kendo-font-weight-extra-lightNumber200200
Description
The extra light font weight across all components.
$kendo-font-weight-lightNumber300300
Description
The light font weight across all components.
$kendo-font-weight-normalNumber$kendo-font-weight400
Description
The normal font weight across all components.
$kendo-font-weight-mediumNumber500500
Description
The medium font weight across all components.
$kendo-font-weight-semiboldNumber600600
Description
The semibold font weight across all components.
$kendo-font-weight-boldNumber700700
Description
The bold font weight across all components.
$kendo-font-weight-extra-boldNumber800800
Description
The extra bold font weight across all components.
$kendo-font-weight-blackNumber900900
Description
The most pronounced font weight across all components.
$kendo-letter-spacingNullnullnull
Description
The base letter spacing across all components.
$kendo-letter-spacing-tightestNumber-.15px-0.15px
Description
The tightest letter spacing across all components.
$kendo-letter-spacing-tighterNumber-.10px-0.1px
Description
Slightly looser than the tighter letter spacing across all components.
$kendo-letter-spacing-tightNumber-.5px-0.5px
Description
Moderately tight letter spacing across all components.
$kendo-letter-spacing-normalNumber0px0px
Description
The normal letter spacing across all components.
$kendo-letter-spacing-wideNumber.5px0.5px
Description
Wide letter spacing across all components.
$kendo-letter-spacing-widerNumber.10px0.1px
Description
Slightly wider than the wide letter spacing across all components.
$kendo-letter-spacing-widestNumber.15px0.15px
Description
The widest letter spacing across all components.
$kendo-font-family-sansListArial, Verdana, Tahoma, "Trebuchet MS", Helvetica, Impact, Gill SansArial, Verdana, Tahoma, "Trebuchet MS", Helvetica, Impact, Gill Sans
Description
The sans font family across all components.
$kendo-font-family-serifList"Times New Roman", Georgia, Garamond, Palatino, Baskerville"Times New Roman", Georgia, Garamond, Palatino, Baskerville
Description
The serif font family across all components.
$kendo-font-sizesMapk-map-merge( $_default-font-sizes, $kendo-font-sizes )(xxs: 0.5rem, xs: 0.75rem, sm: 0.875rem, md: 1rem, lg: 1.25rem, xl: 1.5rem)
Description
The font sizes map
$kendo-line-heightsMapk-map-merge( $_default-line-heights, $kendo-line-heights )(xs: 1, sm: 1.25, md: 1.5, lg: 1.75)
Description
The line heights map
$kendo-font-weightsMapk-map-merge( $_default-font-weights, $kendo-font-weights )(thin: 100, extra-light: 200, light: 300, normal: 400, medium: 500, semibold: 600, bold: 700)
Description
The font weights map
$kendo-letter-spacingsMapk-map-merge( $_default-letter-spacings, $kendo-letter-spacings )(tightest: -0.15px, tighter: -0.1px, tight: -0.5px, normal: 0px, wide: 0.5px, wider: 0.1px, widest: 0.15px)
Description
The letter spacings map
$kendo-font-familiesMapk-map-merge( $_default-font-families, $kendo-font-families )(sans: (Arial, Verdana, Tahoma, "Trebuchet MS", Helvetica, Impact, Gill Sans), serif: ("Times New Roman", Georgia, Garamond, Palatino, Baskerville), 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"), monospace: (SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace))
Description
The font families map

Window

NameTypeDefault valueComputed value
$kendo-window-border-widthNumber1px1px
Description
Width of the border around the window.
$kendo-window-border-radiusNumberk-map-get( $kendo-border-radii, md )0.25rem
Description
Border radius of the window.
$kendo-window-font-familyNullnullnull
Description
Font family of the window.
$kendo-window-font-sizeNumber$kendo-font-size-md1rem
Description
Font size of the window.
$kendo-window-line-heightNumber$kendo-line-height-md1.5
Description
Line height of the window.
$kendo-window-titlebar-padding-xStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
Horizontal padding of the window titlebar.
$kendo-window-titlebar-padding-yStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
Vertical padding of the window titlebar.
$kendo-window-titlebar-spacingStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
Spacing between title and actions in window titlebar.
$kendo-window-titlebar-border-widthNullnullnull
Description
Width of the top border of the window titlebar.
$kendo-window-titlebar-border-styleStringsolidsolid
Description
Style of the top border of the window titlebar.
$kendo-window-title-font-sizeNumber$kendo-font-size-lg1.25rem
Description
Font size of the title of the window.
$kendo-window-title-line-heightNumber$kendo-line-height-sm1.25
Description
Line height of the title of the window.
$kendo-window-title-font-weightNullnullnull
Description
Font weight of the title of the window.
$kendo-window-titlebar-actions-spacingNullnullnull
Description
Spacing between the buttons in the header of the window.
$kendo-window-titlebar-action-opacityNumber11
Description
Opacity of the buttons in the header of the window.
$kendo-window-titlebar-action-hover-opacityNumber11
Description
Opacity of the buttons when hovered in the header of the window.
$kendo-window-inner-padding-xStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
Horizontal padding of the content of the window.
$kendo-window-inner-padding-yStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
Vertical padding of the content of the window.
$kendo-window-actions-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
Horizontal padding of the window action buttons.
$kendo-window-actions-padding-yStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
Vertical padding of the window action buttons.
$kendo-window-actions-border-widthNumber1px1px
Description
Width of the top border of the window action buttons.
$kendo-window-actions-spacingStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
Spacing between the action buttons of the window.
$kendo-window-bgColor$kendo-component-bg#ffffff
Description
Background color of the window.
$kendo-window-textColor$kendo-component-text#494949
Description
Text color of the window.
$kendo-window-borderColor$kendo-component-border#ededed
Description
Border color of the window.
$kendo-window-shadowStringnonenone
Description
Box shadow around the window.
$kendo-window-focus-shadowStringnonenone
Description
Box shadow around the window when hovered.