Styling & Themes / Experimental / Nouvelle Theme / Customization /

Customization

Variables

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

Common

Name	Type	Default value	Computed value
$kendo-interactive-bg	Color	`#f6f6f6`	`#f6f6f6`
Description The background of the components' chrome area.
$kendo-interactive-text	Color	`#656565`	`#656565`
Description The text color of the components' chrome area.
$kendo-interactive-border	Color	`rgba( black, .08 )`	`rgba(0, 0, 0, 0.08)`
Description The border color of the components' chrome area.
$kendo-interactive-gradient	List	`rgba( 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-bg	Color	`k-color-shade( $kendo-component-bg, .5 )`	`whitesmoke`
Description The background of hovered items.
$kendo-hover-text	Color	`$kendo-component-text`	`#494949`
Description The text color of hover items.
$kendo-hover-border	Color	`rgba( black, .15 )`	`rgba(0, 0, 0, 0.15)`
Description The border color of hover items.
$kendo-hover-gradient	List	`rgba( 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-bg	Color	`$kendo-color-primary`	`#622331`
Description The background of selected items.
$kendo-selected-text	Color	`k-contrast-color( $kendo-selected-bg )`	`white`
Description The text color of selected items.
$kendo-selected-border	Color	`rgba( black, .1 )`	`rgba(0, 0, 0, 0.1)`
Description The border color of selected items.
$kendo-selected-gradient	String	`none`	`none`
Description The gradient background of selected items.

Accessibility

Name	Type	Default value	Computed value
$wcag-min-contrast-ratio	Number	`7`	`4.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-dark	Color	`black`	`black`
Description Default dark color for WCAG 2.0.
$wcag-light	Color	`white`	`white`
Description Default light color for WCAG 2.0.

Actions

Name	Type	Default value	Computed value
$kendo-actions-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description Horizontal padding of actions container.
$kendo-actions-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description Vertical padding of actions container.
$kendo-actions-border-width	List	`0 0 0 0`	`0 0 0 0`
Description Width of the border around actions container.
$kendo-actions-bg	Null	`null`	`null`
Description Background color of actions container.
$kendo-actions-text	Null	`null`	`null`
Description Text color of actions container.
$kendo-actions-border	Null	`null`	`null`
Description Border color of actions container.
$kendo-actions-spacing	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description Spacing between items in actions container

Actions-list

Name	Type	Default value	Computed value
$kendo-actions-list-spacing	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description Spacing between items in actions list

Avatar

Name	Type	Default value	Computed value
$kendo-avatar-border-width	Number	`1px`	`1px`
Description Border width of the avatar.
$kendo-avatar-font-family	String	`$kendo-font-family`	`inherit`
Description Font family of the avatar.
$kendo-avatar-font-size	Number	`$kendo-font-size-md`	`1rem`
Description Font size of the avatar.
$kendo-avatar-line-height	Number	`$kendo-line-height-md`	`1.5`
Description Line height of the avatar.
$kendo-avatar-sizes	Map	`( 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-theme	Map	`k-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

Name	Type	Default value	Computed value
$kendo-badge-border-width	Number	`1px`	`1px`
Description Border width of the badge.
$kendo-badge-font-family	String	`$kendo-font-family`	`inherit`
Description Font family of the badge.
$kendo-badge-font-weight	Null	`null`	`null`
Description Font weight of the badge.
$kendo-badge-sm-padding-x	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description Horizontal padding of the badge.
$kendo-badge-sm-padding-y	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description Vertical padding of the badge.
$kendo-badge-sm-font-size	Number	`$kendo-font-size-xs`	`0.75rem`
Description Font sizes of the badge.
$kendo-badge-sm-line-height	Null	`null`	`null`
Description Line heights of the badge.
$kendo-badge-sm-min-width	Calculation	`calc( #{$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-sizes	Map	( 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-theme	Map	`k-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

Name	Type	Default value	Computed value
$kendo-bottom-nav-shadow	Null	`null`	`null`
Description Box shadow of the bottom navigation.
$kendo-bottom-nav-item-focus-offset	Null	`null`	`null`
Description Offset of the focused bottom navigation item.
$kendo-bottom-nav-item-focus-outline-width	Number	`1px`	`1px`
Description Outline width of the focused bottom navigation item.
$kendo-bottom-nav-item-focus-outline-style	String	`solid`	`solid`
Description Outline style of the focused bottom navigation item.
$kendo-bottom-nav-item-icon-margin-x	Null	`null`	`null`
Description Horizontal margin of the focused bottom navigation item icon.
$kendo-bottom-nav-item-icon-margin-y	Null	`null`	`null`
Description Vertical margin of the focused bottom navigation item icon.

Name	Type	Default value	Computed value
$kendo-bottom-nav-padding-x	Null	`null`	`null`
Description Horizontal padding of the bottom navigation.
$kendo-bottom-nav-padding-y	Null	`null`	`null`
Description Vertical padding of the bottom navigation.
$kendo-bottom-nav-gap	Null	`null`	`null`
Description Spacing of the bottom navigation.
$kendo-bottom-nav-border-width	Null	`null`	`null`
Description Border width of the bottom navigation.
$kendo-bottom-nav-font-family	String	`$kendo-font-family`	`inherit`
Description Font family of the bottom navigation.
$kendo-bottom-nav-font-size	Null	`null`	`null`
Description Font size of the bottom navigation.
$kendo-bottom-nav-line-height	Null	`null`	`null`
Description Line height of the bottom navigation.
$kendo-bottom-nav-item-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description Horizontal padding of the bottom navigation item.
$kendo-bottom-nav-item-padding-y	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description Vertical padding of the bottom navigation item.
$kendo-bottom-nav-item-min-width	Number	`72px`	`72px`
Description Minimum width of the bottom navigation item.
$kendo-bottom-nav-item-max-width	String	`none`	`none`
Description Maximum width of the bottom navigation item.
$kendo-bottom-nav-item-border-radius	Null	`null`	`null`
Description Border radius of the bottom navigation item.
$kendo-bottom-nav-item-gap	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description Spacing of the bottom navigation item.

Name	Type	Default value	Computed value
$kendo-breadcrumb-border-width	Number	`0px`	`0px`
Description The width of the border around the Breadcrumb.
$kendo-breadcrumb-margin-x	Null	`null`	`null`
Description The horizontal margin of the Breadcrumb.
$kendo-breadcrumb-margin-y	Null	`null`	`null`
Description The vertical margin of the Breadcrumb.
$kendo-breadcrumb-padding-x	Null	`null`	`null`
Description The horizontal padding of the Breadcrumb.
$kendo-breadcrumb-padding-y	Null	`null`	`null`
Description The vertical padding of the Breadcrumb.
$kendo-breadcrumb-font-family	String	`$kendo-font-family`	`inherit`
Description The font family of the Breadcrumb.
$kendo-breadcrumb-font-size	Number	`$kendo-font-size-md`	`1rem`
Description The font size of the Breadcrumb.
$kendo-breadcrumb-sm-font-size	Number	`$kendo-font-size-sm`	`0.875rem`
Description The font size of the small Breadcrumb.
$kendo-breadcrumb-md-font-size	Number	`$kendo-breadcrumb-font-size`	`1rem`
Description The font size of the medium Breadcrumb.
$kendo-breadcrumb-lg-font-size	Number	`$kendo-font-size-lg`	`1.25rem`
Description The font size of the large Breadcrumb.
$kendo-breadcrumb-line-height	Number	`$kendo-line-height-md`	`1.5`
Description The line-height of the Breadcrumb.
$kendo-breadcrumb-sm-line-height	Number	`$kendo-line-height-md`	`1.5`
Description The line-height of the small Breadcrumb.
$kendo-breadcrumb-md-line-height	Number	`$kendo-breadcrumb-line-height`	`1.5`
Description The line-height of the medium Breadcrumb.
$kendo-breadcrumb-lg-line-height	Number	`$kendo-line-height-lg`	`1.75`
Description The line-height of the height Breadcrumb.
$kendo-breadcrumb-focus-shadow	Null	`$kendo-focus-shadow`	`null`
Description The box shadow of the focused Breadcrumb.
$kendo-breadcrumb-link-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the Breadcrumb link.
$kendo-breadcrumb-sm-link-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the small Breadcrumb link.
$kendo-breadcrumb-md-link-padding-x	String	`$kendo-breadcrumb-link-padding-x`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the medium Breadcrumb link.
$kendo-breadcrumb-lg-link-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the large Breadcrumb link.
$kendo-breadcrumb-link-padding-y	String	`k-spacing(1.5)`	`var(--kendo-spacing-1\.5, 0.375rem)`
Description The vertical padding of the Breadcrumb link.
$kendo-breadcrumb-sm-link-padding-y	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The vertical padding of the small Breadcrumb link.
$kendo-breadcrumb-md-link-padding-y	String	`$kendo-breadcrumb-link-padding-y`	`var(--kendo-spacing-1\.5, 0.375rem)`
Description The vertical padding of the medium Breadcrumb link.
$kendo-breadcrumb-lg-link-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the large Breadcrumb link.
$kendo-breadcrumb-link-border-radius	Number	`k-map-get( $kendo-border-radii, md )`	`0.25rem`
Description The border-radius of the Breadcrumb link.
$kendo-breadcrumb-icon-link-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the Breadcrumb link icon.
$kendo-breadcrumb-sm-icon-link-padding-y	String	`k-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-y	String	`$kendo-breadcrumb-icon-link-padding-y`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the medium Breadcrumb link icon.
$kendo-breadcrumb-lg-icon-link-padding-y	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description The vertical padding of the large Breadcrumb link icon.
$kendo-breadcrumb-icon-link-padding-x	String	`$kendo-breadcrumb-icon-link-padding-y`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the Breadcrumb link icon.
$kendo-breadcrumb-sm-icon-link-padding-x	String	`$kendo-breadcrumb-sm-icon-link-padding-y`	`var(--kendo-spacing-1\.5, 0.375rem)`
Description The horizontal padding of the small Breadcrumb link icon.
$kendo-breadcrumb-md-icon-link-padding-x	String	`$kendo-breadcrumb-icon-link-padding-x`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the medium Breadcrumb link icon.
$kendo-breadcrumb-lg-icon-link-padding-x	String	`$kendo-breadcrumb-lg-icon-link-padding-y`	`var(--kendo-spacing-3, 0.75rem)`
Description The horizontal padding of the large Breadcrumb link icon.
$kendo-breadcrumb-link-icon-spacing	String	`$kendo-icon-spacing`	`k-spacing(2)`
Description The spacing of the Breadcrumb link icon.
$kendo-breadcrumb-link-focus-shadow	Null	`$kendo-focus-shadow`	`null`
Description The box shadow of the focused Breadcrumb link.
$kendo-breadcrumb-sizes	Map	( 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

Name	Type	Default value	Computed value
$kendo-captcha-width	Number	`280px`	`280px`
Description The width of the Captcha.
$kendo-captcha-font-family	String	`$kendo-font-family`	`inherit`
Description The font family of the Captcha.
$kendo-captcha-font-size	Number	`$kendo-font-size-md`	`1rem`
Description The font size of the Captcha.
$kendo-captcha-line-height	Number	`$kendo-line-height-md`	`1.5`
Description The line height of the Captcha.
$kendo-captcha-spacing	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The spacing of the Captcha.
$kendo-captcha-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The background color of the Captcha.
$kendo-captcha-text	Color	`$kendo-component-text`	`#494949`
Description The text color of the Captcha.
$kendo-captcha-border	Color	`$kendo-component-border`	`#ededed`
Description The border color of the Captcha.
$kendo-captcha-image-wrap-spacing	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The spacing of the Captcha image wrapper.
$kendo-captcha-image-controls-spacing	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The spacing of the Captcha image controls.
$kendo-captcha-validation-offset-y	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The offset of the Captcha validation message.
$kendo-captcha-validation-font-size	Number	`$kendo-font-size-sm`	`0.875rem`
Description The font size of the Captcha validation message.

Card

Name	Type	Default value	Computed value
$kendo-card-padding-x	Null	`null`	`null`
Description Horizontal padding of the card.
$kendo-card-padding-y	Null	`null`	`null`
Description Vertical padding of the card.
$kendo-card-border-width	Number	`1px`	`1px`
Description Width of the border around the card.
$kendo-card-border-radius	Number	`k-map-get( $kendo-border-radii, md )`	`0.25rem`
Description Border radius of the card.
$kendo-card-font-family	Null	`null`	`null`
Description Font family of the card.
$kendo-card-font-size	Null	`null`	`null`
Description Font size of the card.
$kendo-card-line-height	Null	`null`	`null`
Description Line height of the card.
$kendo-card-deck-gap	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description Spacing between the cards in the card deck.
$kendo-card-bg	Color	`$kendo-component-bg`	`#ffffff`
Description Background color of the card.
$kendo-card-text	Color	`$kendo-component-text`	`#494949`
Description Text color of the card.
$kendo-card-border	Color	`$kendo-component-border`	`#ededed`
Description Border color of the card.
$kendo-card-shadow	Null	`null`	`null`
Description Shadow of the card.
$kendo-card-focus-bg	Color	`$kendo-card-bg`	`#ffffff`
Description Background color of the card when focused.
$kendo-card-focus-text	Null	`null`	`null`
Description Text color of the card when focused.
$kendo-card-focus-border	Null	`null`	`null`
Description Border color of the card when focused.
$kendo-card-focus-shadow	Null	`null`	`null`
Description Shadow of the card when focused.
$kendo-card-header-padding-x	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description Horizontal padding of the card header.
$kendo-card-header-padding-y	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description Vertical padding of the card header.
$kendo-card-header-border-width	Null	`null`	`null`
Description Bottom border width of the card header.
$kendo-card-header-font-weight	Null	`null`	`null`
Description Text weight of the card header.
$kendo-card-header-bg	Color	`k-get-theme-color( neutral, 50 )`	`#f8f8f8`
Description Background color of the card header.
$kendo-card-header-text	Color	`$kendo-card-text`	`#494949`
Description Text color of the card header.
$kendo-card-header-border	Color	`$kendo-card-border`	`#ededed`
Description Border color of the card header.
$kendo-card-body-padding-x	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description Horizontal padding of the card body.
$kendo-card-body-padding-y	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description Vertical padding of the card body.
$kendo-card-footer-padding-x	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description Horizontal padding of the card footer.
$kendo-card-footer-padding-y	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description Vertical padding of the card footer.
$kendo-card-footer-border-width	Null	`null`	`null`
Description Top border width of the card footer.
$kendo-card-footer-bg	Null	`null`	`null`
Description Background color of the card footer.
$kendo-card-footer-text	Null	`null`	`null`
Description Text color of the card footer.
$kendo-card-footer-border	Color	`$kendo-card-border`	`#ededed`
Description Border color of the card footer.
$kendo-card-title-margin-bottom	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description Bottom margin of the card title.
$kendo-card-title-font-weight	Null	`null`	`null`
Description Font weight of the card title.
$kendo-card-title-text	Null	`null`	`null`
Description Text color of the card subtitle.
$kendo-card-subtitle-margin-bottom	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description Bottom margin of the card subtitle.
$kendo-card-subtitle-font-weight	Null	`null`	`null`
Description Font weight of the card title.
$kendo-card-subtitle-text	Color	`$kendo-subtle-text`	`#5f5f5f`
Description Text color of the card subtitle.
$kendo-card-img-max-width	Number	`100px`	`100px`
Description Maximum width of the card image.
$kendo-card-avatar-size	Number	`3rem`	`3rem`
Description Size of the avatar in the card.
$kendo-card-actions-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description Horizontal padding of the card actions.
$kendo-card-actions-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description Vertical padding of the card actions.
$kendo-card-actions-border-width	Null	`null`	`null`
Description Top border of the card actions.
$kendo-card-actions-gap	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description Spacing between the card actions.
$kendo-card-deck-scroll-button-radius	Null	`null`	`null`
Description Border radius of the scroll button in the card deck.
$kendo-card-callout-size	Number	`20px`	`20px`
Description Size of the card callout.

Checkbox

Name	Type	Default value	Computed value
$kendo-checkbox-border-radius	Null	`null`	`null`
Description Border radius of checkbox
$kendo-checkbox-border-width	Number	`1px`	`1px`
Description Border width of checkbox.
$kendo-checkbox-bg	Color	`$kendo-component-bg`	`#ffffff`
Description Background color of checkbox.
$kendo-checkbox-text	Null	`null`	`null`
Description Color of checkbox.
$kendo-checkbox-border	Color	`$kendo-component-border`	`#ededed`
Description Border color of checkbox.
$kendo-checkbox-hover-bg	Null	`null`	`null`
Description Background color of hovered checkbox.
$kendo-checkbox-hover-text	Null	`null`	`null`
Description Color of hovered checkbox.
$kendo-checkbox-hover-border	Null	`null`	`null`
Description Border color of hovered checkbox.
$kendo-checkbox-focus-border	Null	`null`	`null`
Description Border color of focused checkbox.
$kendo-checkbox-focus-shadow	Null	`null`	`null`
Description Box shadow of focused checkbox.
$kendo-checkbox-focus-outline	Null	`null`	`null`
Description The outline of a focused checkbox.
$kendo-checkbox-checked-bg	Color	`$kendo-color-primary`	`#622331`
Description Background color of checked checkbox.
$kendo-checkbox-checked-text	Color	`k-contrast-color( $kendo-checkbox-checked-bg )`	`white`
Description Color of checked checkbox.
$kendo-checkbox-checked-border	Color	`$kendo-checkbox-checked-bg`	`#622331`
Description Border color of checked checkbox.
$kendo-checkbox-hover-checked-bg	Null	`null`	`null`
Description Background of hovered and checked checkbox.
$kendo-checkbox-hover-checked-text	Null	`null`	`null`
Description Color of checked checkbox.
$kendo-checkbox-hover-checked-border	Null	`null`	`null`
Description Border of hovered and checked checkbox.
$kendo-checkbox-indeterminate-bg	Color	`$kendo-checkbox-checked-bg`	`#622331`
Description Background color of indeterminate checkbox.
$kendo-checkbox-indeterminate-text	Color	`$kendo-checkbox-checked-text`	`white`
Description Color of indeterminate checkbox.
$kendo-checkbox-indeterminate-border	Color	`$kendo-checkbox-checked-border`	`#622331`
Description Border color of indeterminate checkbox.
$kendo-checkbox-hover-indeterminate-bg	Null	`null`	`null`
Description Background color of hovered and indeterminate checkbox.
$kendo-checkbox-hover-indeterminate-text	Null	`null`	`null`
Description Background color of hovered and indeterminate checkbox.
$kendo-checkbox-hover-indeterminate-border	Null	`null`	`null`
Description Border color of hovered and indeterminate checkbox.
$kendo-checkbox-disabled-bg	Null	`null`	`null`
Description Background color of disabled checkbox.
$kendo-checkbox-disabled-text	Null	`null`	`null`
Description Color of disabled checkbox.
$kendo-checkbox-disabled-border	Null	`null`	`null`
Description Border color of disabled checkbox.
$kendo-checkbox-disabled-checked-bg	Null	`null`	`null`
Description Background color of disabled and checked checkbox.
$kendo-checkbox-disabled-checked-text	Null	`null`	`null`
Description Color of disabled and checked checkbox.
$kendo-checkbox-disabled-checked-border	Null	`null`	`null`
Description Border color of disabled and checked checkbox.
$kendo-checkbox-disabled-indeterminate-bg	Null	`null`	`null`
Description Background color of disabled and indeterminate checkbox.
$kendo-checkbox-disabled-indeterminate-text	Null	`null`	`null`
Description Border color of disabled and indeterminate checkbox.
$kendo-checkbox-disabled-indeterminate-border	Null	`null`	`null`
Description Border color of disabled and indeterminate checkbox.
$kendo-checkbox-invalid-bg	Color	`$kendo-checkbox-bg`	`#ffffff`
Description Background color of invalid checkbox.
$kendo-checkbox-invalid-text	Color	`$kendo-invalid-text`	`#cf222e`
Description Color of invalid checkbox.
$kendo-checkbox-invalid-border	Color	`$kendo-invalid-border`	`#cf222e`
Description Border color of invalid checkbox.
$kendo-checkbox-indicator-type	String	`glyph`	`glyph`
Description Type of checkbox indicator.
$kendo-checkbox-glyph-font-family	List	`"WebComponentsIcons", monospace`	`"WebComponentsIcons", monospace`
Description Glyph font family of checkbox indicator.
$kendo-checkbox-checked-glyph	String	`"\e118"`	`"\e118"`
Description Glyph of checkbox indicator.
$kendo-checkbox-indeterminate-glyph	String	`"\e121"`	`"\e121"`
Description Glyph of indeterminate checkbox indicator.
$kendo-checkbox-image	Null	`null`	`null`
Description Image of checkbox indicator.
$kendo-checkbox-hover-image	Null	`null`	`null`
Description Image of hovered checkbox indicator.
$kendo-checkbox-checked-image	Null	`null`	`null`
Description Image of checked checkbox indicator.
$kendo-checkbox-indeterminate-image	Null	`null`	`null`
Description Image of indeterminate checkbox indicator.
$kendo-checkbox-hover-checked-image	Null	`null`	`null`
Description Image of hovered and checked checkbox indicator.
$kendo-checkbox-hover-indeterminate-image	Null	`null`	`null`
Description Image of hovered and indeterminate checkbox indicator.
$kendo-checkbox-disabled-checked-image	Null	`null`	`null`
Description Image of checked checkbox indicator.
$kendo-checkbox-disabled-indeterminate-image	Null	`null`	`null`
Description Image of indeterminate checkbox indicator.
$kendo-checkbox-list-spacing	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description Spacing between items of horizontal checkbox list.
$kendo-checkbox-list-item-padding-x	Null	`null`	`null`
Description Horizontal padding of checkbox list items.
$kendo-checkbox-list-item-padding-y	Null	`null`	`null`
Description Vertical padding of checkbox list items.
$kendo-checkbox-list-item-spacing	Null	`null`	`null`
Description Spacing between checkbox and text.
$kendo-checkbox-ripple-bg	Color	`$kendo-color-primary`	`#622331`
Description Background color of checkbox ripple.
$kendo-checkbox-ripple-opacity	Number	`.25`	`0.25`
Description Opacity of checkbox ripple.

Chip

Name	Type	Default value	Computed value
$kendo-chip-border-width	Number	`1px`	`1px`
Description Width of the border around the button.
$kendo-chip-font-family	Null	`null`	`null`
Description The font family of the chip.
$kendo-chip-list-sizes	Map	`( 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

Name	Type	Default value	Computed value
$kendo-color-white	Color	`#ffffff`	`#ffffff`
Description The color white. Note: you cannot change this value.
$kendo-color-black	Color	`#000000`	`#000000`
Description The color black. Note: you cannot change this value.
$kendo-color-primary	Color	`#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-contrast	Color	`k-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-info	Color	`#0969da`	`#0969da`
Description The color for informational messages and states.
$kendo-color-success	Color	`#1a7f37`	`#1a7f37`
Description The color for success messages and states.
$kendo-color-warning	Color	`#bc4c00`	`#bc4c00`
Description The color for warning messages and states.
$kendo-color-error	Color	`#cf222e`	`#cf222e`
Description The color for error messages and states.
$kendo-color-dark	Color	`#404040`	`#404040`
Description The dark color of the theme.
$kendo-color-light	Color	`#ebebeb`	`#ebebeb`
Description The light color of the theme.
$kendo-color-inverse	Color	`if( $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-transparent	Color	`rgba(0, 0, 0, 0)`	`rgba(0, 0, 0, 0)`
Description The color transparent. Note: you cannot change this value.
$kendo-gradient-transparent-to-black	Gradient	`rgba(black, 0), black`	`rgba(0, 0, 0, 0), black`
Description A gradient that goes from transparent to black. Note: you cannot change this value.
$kendo-gradient-transparent-to-white	Gradient	`rgba(white, 0), white`	`rgba(255, 255, 255, 0), white`
Description A gradient that goes from transparent to white. Note: you cannot change this value.
$kendo-gradient-black-to-transparent	Gradient	`black, 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-transparent	Gradient	`white, 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-rainbow	Gradient	`#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-colors	Map	`$_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

Name	Type	Default value	Computed value
$kendo-component-bg	Color	`k-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-text	Color	`k-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-border	Color	`k-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

Name	Type	Default value	Computed value
$kendo-elevation	Map	`$_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

Name	Type	Default value	Computed value
$kendo-icon-size	Number	`1rem`	`16px`
Description Font size of the icons.
$kendo-icon-size-md	Number	`1rem`	`16px`
Description Font size of the icons.
$kendo-icon-size-lg	Calculation	`1.25rem`	`calc(16px * 1.25)`
Description Font size of the large icons.
$kendo-icon-spacing	String	`k-spacing(1)`	`k-spacing(2)`
Description Spacing around the icons.

List

Name	Type	Default value	Computed value
$kendo-list-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The background of the list.
$kendo-list-text	Color	`$kendo-component-text`	`#494949`
Description The text color of the list.
$kendo-list-border	Color	`$kendo-component-border`	`#ededed`
Description The border color of the list.

Name	Type	Default value	Computed value
$kendo-popup-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The background of the popup.
$kendo-popup-text	Color	`$kendo-component-text`	`#494949`
Description The text color of the popup.
$kendo-popup-border	Color	`$kendo-component-border`	`#ededed`
Description The border color of the popup.

Progressbar

Name	Type	Default value	Computed value
$kendo-progressbar-inline-size	Null	`null`	`null`
Description Inline size of the progressbar. Width when horizontal, height when vertical.
$kendo-progressbar-block-size	Null	`null`	`null`
Description Block size of the progressbar. Height when horizontal, width when vertical.
$kendo-progressbar-border-width	Null	`null`	`null`
Description Border width of the progressbar.
$kendo-progressbar-border-radius	Null	`null`	`null`
Description Border radius of the progressbar.
$kendo-progressbar-font-family	Null	`null`	`null`
Description Font family of the progressbar.
$kendo-progressbar-font-size	Null	`null`	`null`
Description Font size of the progressbar.
$kendo-progressbar-line-height	Null	`null`	`null`
Description Line height of the progressbar.
$kendo-progressbar-animation-timing	List	`1s linear infinite`	`1s linear infinite`
Description Animation timing of the progressbar.
$kendo-progressbar-status-padding-x	Null	`null`	`null`
Description Inline padding of the progressbar status.
$kendo-progressbar-status-padding-y	Null	`null`	`null`
Description Block padding of the progressbar status.
$kendo-progressbar-bg	Color	`k-try-shade( $kendo-component-bg, 1 )`	`#ebebeb`
Description Background color of the progressbar.
$kendo-progressbar-text	Color	`$kendo-component-text`	`#494949`
Description Text color of the progressbar.
$kendo-progressbar-border	Color	`$kendo-component-border`	`#ededed`
Description Border color of the progressbar.
$kendo-progressbar-gradient	Null	`null`	`null`
Description Background gradient of the progressbar.
$kendo-progressbar-value-bg	Color	`$kendo-color-primary`	`#622331`
Description Progress background color of the progressbar.
$kendo-progressbar-value-text	Color	`k-contrast-legacy( $kendo-progressbar-value-bg )`	`white`
Description Progress text color of the progressbar.
$kendo-progressbar-value-border	Color	`k-try-shade( $kendo-progressbar-value-bg )`	`#5a202d`
Description Progress border color of the progressbar.
$kendo-progressbar-value-gradient	Null	`null`	`null`
Description Progress background gradient of the progressbar.
$kendo-progressbar-indeterminate-bg	Color	`$kendo-progressbar-bg`	`#ebebeb`
Description Background color of the indeterminate progressbar.
$kendo-progressbar-indeterminate-text	Color	`$kendo-progressbar-text`	`#494949`
Description Text color of the indeterminate progressbar.
$kendo-progressbar-indeterminate-border	Color	`$kendo-progressbar-border`	`#ededed`
Description Border color of the indeterminate progressbar.
$kendo-progressbar-indeterminate-gradient	Null	`null`	`null`
Description Background gradient of the indeterminate progressbar.
$kendo-progressbar-chunk-border	Color	`$kendo-body-bg`	`#ffffff`
Description Border color of the chunk progressbar.
$kendo-circular-progressbar-arc-stroke	Color	`$kendo-color-primary`	`#622331`
Description Arc stroke color of the circular progressbar.
$kendo-circular-progressbar-scale-stroke	Color	`$kendo-progressbar-bg`	`#ebebeb`
Description Scale stroke background color of the circular progressbar.
$kendo-progressbar-theme	Map	`( 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

Name	Type	Default value	Computed value
$kendo-border-radius-none	Number	`k-map-get($kendo-spacing, 0)`	`0`
Description The none border radius used across the Components.
$kendo-border-radius-xs	Number	`k-map-get($kendo-spacing, 1px)`	`1px`
Description The extra small border radius used across the Components.
$kendo-border-radius-sm	Number	`k-map-get($kendo-spacing, 0.5)`	`0.125rem`
Description The small border radius used across the Components.
$kendo-border-radius-md	Number	`k-map-get($kendo-spacing, 1)`	`0.25rem`
Description The medium border radius used across the Components.
$kendo-border-radius-lg	Number	`k-map-get($kendo-spacing, 1.5)`	`0.375rem`
Description The large border radius used across the Components.
$kendo-border-radius-xl	Number	`k-map-get($kendo-spacing, 2)`	`0.5rem`
Description The extra large border radius used across the Components.
$kendo-border-radius-xxl	Number	`k-map-get($kendo-spacing, 3)`	`0.75rem`
Description The third largest border radius used across the Components.
$kendo-border-radius-xxxl	Number	`k-map-get($kendo-spacing, 4)`	`1rem`
Description The second largest border radius used across the Components.
$kendo-border-radius-full	Number	`9999px`	`9999px`
Description The largest border radius used across the Components.
$kendo-border-radii	Map	`k-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

Name	Type	Default value	Computed value
$kendo-radio-border-radius	Number	`50%`	`50%`
Description Border radius of radio button.
$kendo-radio-border-width	Number	`1px`	`1px`
Description Border width of radio.
$kendo-radio-bg	Color	`$kendo-component-bg`	`#ffffff`
Description Background color of radio.
$kendo-radio-text	Null	`null`	`null`
Description Color of radio.
$kendo-radio-border	Color	`$kendo-component-border`	`#ededed`
Description Border color of radio.
$kendo-radio-hover-bg	Null	`null`	`null`
Description Background color of hovered radio.
$kendo-radio-hover-text	Null	`null`	`null`
Description Color of hovered radio.
$kendo-radio-hover-border	Null	`null`	`null`
Description Border color of hovered radio.
$kendo-radio-focus-border	Null	`null`	`null`
Description Border color of focused radio.
$kendo-radio-focus-shadow	Null	`null`	`null`
Description Box shadow of focused radio.
$kendo-radio-focus-outline	Null	`null`	`null`
Description The outline of a focused radio.
$kendo-radio-checked-bg	Color	`$kendo-color-primary`	`#622331`
Description Background color of checked radio.
$kendo-radio-checked-text	Color	`k-contrast-color( $kendo-radio-checked-bg )`	`white`
Description Color of checked radio.
$kendo-radio-checked-border	Color	`$kendo-radio-checked-bg`	`#622331`
Description Border color of checked radio.
$kendo-radio-hover-checked-bg	Null	`null`	`null`
Description Background of hovered and checked radio.
$kendo-radio-hover-checked-text	Null	`null`	`null`
Description Color of checked radio.
$kendo-radio-hover-checked-border	Null	`null`	`null`
Description Border of hovered and checked radio.
$kendo-radio-disabled-bg	Null	`null`	`null`
Description Background color of disabled radio.
$kendo-radio-disabled-text	Null	`null`	`null`
Description Color of disabled radio.
$kendo-radio-disabled-border	Null	`null`	`null`
Description Border color of disabled radio.
$kendo-radio-disabled-checked-bg	Null	`null`	`null`
Description Background color of disabled and checked radio.
$kendo-radio-disabled-checked-text	Null	`null`	`null`
Description Color of disabled and checked radio.
$kendo-radio-disabled-checked-border	Null	`null`	`null`
Description Border color of disabled and checked radio.
$kendo-radio-invalid-bg	Color	`$kendo-radio-bg`	`#ffffff`
Description Background color of invalid radio.
$kendo-radio-invalid-text	Color	`$kendo-invalid-text`	`#cf222e`
Description Color of invalid radio.
$kendo-radio-invalid-border	Color	`$kendo-invalid-border`	`#cf222e`
Description Border color of invalid radio.
$kendo-radio-indicator-type	String	`pseudo`	`pseudo`
Description Type of radio indicator.
$kendo-radio-indicator-border-radius	Number	`50%`	`50%`
Description Border radius radio button indicator.
$kendo-radio-glyph-font-family	List	`"WebComponentsIcons", monospace`	`"WebComponentsIcons", monospace`
Description Glyph font family of radio indicator.
$kendo-radio-checked-glyph	String	`"\e308"`	`"\e308"`
Description Glyph of radio indicator.
$kendo-radio-image	Null	`null`	`null`
Description Image of radio indicator.
$kendo-radio-hover-image	Null	`null`	`null`
Description Image of hovered radio indicator.
$kendo-radio-checked-image	Null	`null`	`null`
Description Image of checked radio indicator.
$kendo-radio-hover-checked-image	Null	`null`	`null`
Description Image of hovered and checked radio indicator.
$kendo-radio-disabled-checked-image	Null	`null`	`null`
Description Image of checked radio indicator.
$kendo-radio-list-spacing	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description Spacing between items of horizontal radio list.
$kendo-radio-list-item-padding-x	Null	`null`	`null`
Description Horizontal padding of radio list items.
$kendo-radio-list-item-padding-y	Null	`null`	`null`
Description Vertical padding of radio list items.
$kendo-radio-list-item-spacing	Null	`null`	`null`
Description Spacing between radio and text.
$kendo-radio-ripple-bg	Color	`$kendo-color-primary`	`#622331`
Description Background color of radio ripple.
$kendo-radio-ripple-opacity	Number	`.25`	`0.25`
Description Opacity of radio ripple.

Skeleton

Name	Type	Default value	Computed value
$kendo-skeleton-text-transform	String	`scale( 1, .6 )`	`scale(1, 0.6)`
Description The transform scale of the Skeleton text.
$kendo-skeleton-text-border-radius	Number	`k-map-get( $kendo-border-radii, md )`	`0.25rem`
Description The border radius of the Skeleton text.
$kendo-skeleton-rect-border-radius	Number	`k-map-get( $kendo-border-radii, md )`	`0.25rem`
Description The border radius of the rectangular Skeleton.
$kendo-skeleton-circle-border-radius	Number	`9999px`	`9999px`
Description The border radius of the circular Skeleton.
$kendo-skeleton-item-bg	Color	`k-get-theme-color( neutral, 100 )`	`#ededed`
Description The background color of the Skeleton item.
$kendo-skeleton-wave-bg	Color	`k-get-theme-color( neutral, 50 )`	`#f8f8f8`
Description The background color of the Skeleton wave animation.

Slider

Name	Type	Default value	Computed value
$kendo-slider-inline-size	Number	`20em`	`20em`
Description The default slider size.
$kendo-slider-block-size	Number	`22px`	`22px`
Description The default slider track wrap size.
$kendo-slider-spacing	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The spacing of the slider.
$kendo-slider-font-family	Null	`null`	`null`
Description Font family of the slider.
$kendo-slider-font-size	Number	`$kendo-font-size-md`	`1rem`
Description Font size of the slider.
$kendo-slider-line-height	Number	`$kendo-line-height-md`	`1.5`
Description Line height of the slider.
$kendo-slider-track-size	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The size of the slider track.
$kendo-slider-track-border-radius	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The border radius of the slider track.
$kendo-slider-thumb-size	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The default size of the slider thumb.
$kendo-slider-thumb-border-width	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The default border width of the slider thumb.
$kendo-slider-thumb-border-radius	Number	`9999px`	`9999px`
Description The border radius of the slider thumb.
$kendo-slider-thumb-active-scale	Null	`null`	`null`
Description The active transition scale of the slider thumb.
$kendo-slider-thumb-active-size	Null	`null`	`null`
Description The active size of the slider thumb.
$kendo-slider-transition-speed	Number	`.3s`	`0.3s`
Description The transition speed of the slider.
$kendo-slider-transition-function	String	`ease-out`	`ease-out`
Description The transition function function.
$kendo-slider-thumb-transition-speed	Number	`.4s`	`0.4s`
Description The transition speed of the slider thumb.
$kendo-slider-thumb-transition-function	String	`cubic-bezier(.25, .8, .25, 1)`	`cubic-bezier(0.25, 0.8, 0.25, 1)`
Description The transition function of the slider thumb.

Spacing

Name	Type	Default value	Computed value
$kendo-spacing	Map	`$_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

Name	Type	Default value	Computed value
$kendo-switch-font-family	Null	`null`	`null`
Description Font family of the switch.
$kendo-switch-track-border-width	Number	`1px`	`1px`
Description Border width of the switch track.
$kendo-switch-thumb-border-width	Number	`0`	`0`
Description Border width of the switch thumb.
$kendo-switch-label-text-transform	String	`uppercase`	`uppercase`
Description Text transform of the switch label.
$kendo-switch-label-display	String	`none`	`none`
Description Display of the switch label.
$kendo-switch-sizes	Map	`( 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

Name	Type	Default value	Computed value
$kendo-table-border-width	Number	`1px`	`1px`
Description The width of the table border.
$kendo-table-cell-vertical-border-width	Number	`1px`	`1px`
Description The width of vertical border of table cells.
$kendo-table-cell-horizontal-border-width	Number	`1px`	`1px`
Description The width of horizontal border of table cells.
$kendo-table-header-font-weight	Null	`null`	`null`
Description Font weight of the table header cells.
$kendo-table-sizes	Map	( 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

Name	Type	Default value	Computed value
$kendo-tabstrip-wrapper-padding-x	Null	`null`	`null`
Description The horizontal padding of the tabstrip wrapper
$kendo-tabstrip-wrapper-padding-y	Null	`null`	`null`
Description The vertical padding of the tabstrip wrapper
$kendo-tabstrip-wrapper-border-width	Null	`null`	`null`
Description The width of the border around the tabstrip wrapper
$kendo-tabstrip-font-family	Null	`null`	`null`
Description The font family of the tabstrip
$kendo-tabstrip-font-size	Number	`$kendo-font-size-md`	`1rem`
Description The font size of the tabstrip
$kendo-tabstrip-line-height	Number	`$kendo-line-height-md`	`1.5`
Description The line height of the tabstrip
$kendo-tabstrip-border-width	Number	`1px`	`1px`
Description The width of the border around the tabstrip
$kendo-tabstrip-spacing	Null	`null`	`null`
Description The space between the tabstrip items
$kendo-tabstrip-item-padding-x	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The horizontal padding of the tabstrip item
$kendo-tabstrip-item-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the tabstrip item
$kendo-tabstrip-item-border-width	Number	`1px`	`1px`
Description The width of the border around the tabstrip item
$kendo-tabstrip-item-border-style	String	`solid`	`solid`
Description The style of the border around the tabstrip item
$kendo-tabstrip-item-border-radius	Number	`k-map-get( $kendo-border-radii, md )`	`0.25rem`
Description The border radius of the tabstrip item
$kendo-tabstrip-item-focus-shadow	List	`$kendo-list-item-focus-shadow`	`inset 0 0 0 2px rgba(0, 0, 0, 0.8)`
Description The focus shadow of the tabstrip item
$kendo-tabstrip-indicator-size	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The border width of the tabstrip indicator
$kendo-tabstrip-indicator-color	String	`k-get-theme-color-var( primary-100 )`	`var(--kendo-primary-100, inherit)`
Description The border color of the tabstrip ripple
$kendo-tabstrip-content-padding-x	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The horizontal padding of tabstrip content
$kendo-tabstrip-content-padding-y	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The vertical padding of tabstrip content
$kendo-tabstrip-content-border-width	Number	`1px`	`1px`
Description The width of border around tabstrip content
$kendo-tabstrip-content-border-style	String	`solid`	`solid`
Description The style of border around tabstrip content
$kendo-tabstrip-scrollable-button-padding-x	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The horizontal button padding of the scrollable tabstrip
$kendo-tabstrip-scrollable-button-padding-y	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`

Name	Type	Default value	Computed value
$kendo-toolbar-border-width	Number	`1px`	`1px`
Description Width of the border around the toolbar.
$kendo-toolbar-font-family	Null	`null`	`null`
Description Font family of the toolbar.
$kendo-toolbar-font-size	Number	`$kendo-font-size-md`	`1rem`
Description Font size of the toolbar.
$kendo-toolbar-line-height	Number	`$kendo-line-height-md`	`1.5`
Description Line height of the toolbar.
$kendo-toolbar-input-width	Number	`10em`	`10em`
Description The width of the input in the toolbar.
$kendo-toolbar-item-focus-outline-width	Number	`1px`	`1px`
Description Border width of the focused toolbar item.
$kendo-toolbar-item-focus-outline-style	String	`solid`	`solid`
Description Border style of the focused toolbar item.
$kendo-toolbar-sizes	Map	`( 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.

Name	Type	Default value	Computed value
$kendo-tooltip-border-radius	Number	`k-map-get( $kendo-border-radii, md )`	`0.25rem`
Description The radius of the border around the tooltip
$kendo-tooltip-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the tooltip
$kendo-tooltip-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the tooltip
$kendo-tooltip-border-width	Number	`0px`	`0px`
Description The width of the border around the tooltip
$kendo-tooltip-font-family	Null	`null`	`null`
Description The font family of the tooltip
$kendo-tooltip-font-size	Number	`$kendo-font-size-sm`	`0.875rem`
Description The font size of the tooltip
$kendo-tooltip-line-height	Number	`$kendo-line-height-sm`	`1.25`
Description The line height of the tooltip
$kendo-tooltip-title-margin	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The margin of the tooltip title
$kendo-tooltip-title-font-size	Number	`$kendo-font-size-md`	`1rem`
Description The font size of the tooltip title
$kendo-tooltip-title-line-height	Number	`$kendo-line-height-md`	`1.5`
Description The line height of the tooltip title
$kendo-tooltip-title-font-weight	String	`normal`	`normal`
Description The went weight of the tooltip title
$kendo-tooltip-callout-size	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The size of the tooltip callout

Treeview

Name	Type	Default value	Computed value
$kendo-treeview-font-family	Null	`null`	`null`
Description Font family of the treeview component.
$kendo-treeview-sizes	Map	( 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

Name	Type	Default value	Computed value
$kendo-font-size-xs	Number	`.75rem`	`0.75rem`
Description Base font size across all components.
$kendo-font-family-sans-serif	List	`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"`
Description Font family for text.
$kendo-font-family-monospace	List	`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`
Description Font family for monospaced text. Used for styling the code.
$kendo-font-family	String	`null`	`inherit`
Description Font family across all components.
$kendo-line-height-sm	Number	`1.25`	`1.25`
Description Line height used along with $kendo-font-size.
$kendo-font-size	Number	`0.875rem`	`0.875rem`
Description The base font size across all components.
$kendo-font-size-xxs	Number	`0.5rem`	`0.5rem`
Description The extra extra small font size across all components.
$kendo-font-size-sm	Number	`0.75rem`	`0.875rem`
Description The small font size across all components.
$kendo-font-size-md	Number	`$kendo-font-size`	`1rem`
Description The medium font size across all components.
$kendo-font-size-lg	Number	`1rem`	`1.25rem`
Description The large font size across all components.
$kendo-font-size-xl	Number	`1.25rem`	`1.5rem`
Description The extra large font size across all components.
$kendo-line-height	Number	`k-math-div( 20, 14 )`	`1.4285714286`
Description The base line height across all components.
$kendo-line-height-xs	Number	`1`	`1`
Description The extra small line height across all components.
$kendo-line-height-md	Number	`$kendo-line-height`	`1.5`
Description The medium line height across all components.
$kendo-line-height-lg	Number	`1.5`	`1.75`
Description The large line height across all components.
$kendo-line-height-em	Calculation	`calc( #{$kendo-line-height-md} * 1em )`	`calc(1.5 * 1em)`
Description The base line height in ems across all components.
$kendo-font-weight	Number	`400`	`400`
Description The base font weight across all components.
$kendo-font-weight-thin	Number	`100`	`100`
Description The thin font weight across all components.
$kendo-font-weight-extra-light	Number	`200`	`200`
Description The extra light font weight across all components.
$kendo-font-weight-light	Number	`300`	`300`
Description The light font weight across all components.
$kendo-font-weight-normal	Number	`$kendo-font-weight`	`400`
Description The normal font weight across all components.
$kendo-font-weight-medium	Number	`500`	`500`
Description The medium font weight across all components.
$kendo-font-weight-semibold	Number	`600`	`600`
Description The semibold font weight across all components.
$kendo-font-weight-bold	Number	`700`	`700`
Description The bold font weight across all components.
$kendo-font-weight-extra-bold	Number	`800`	`800`
Description The extra bold font weight across all components.
$kendo-font-weight-black	Number	`900`	`900`
Description The most pronounced font weight across all components.
$kendo-letter-spacing	Null	`null`	`null`
Description The base letter spacing across all components.
$kendo-letter-spacing-tightest	Number	`-.15px`	`-0.15px`
Description The tightest letter spacing across all components.
$kendo-letter-spacing-tighter	Number	`-.10px`	`-0.1px`
Description Slightly looser than the tighter letter spacing across all components.
$kendo-letter-spacing-tight	Number	`-.5px`	`-0.5px`
Description Moderately tight letter spacing across all components.
$kendo-letter-spacing-normal	Number	`0px`	`0px`
Description The normal letter spacing across all components.
$kendo-letter-spacing-wide	Number	`.5px`	`0.5px`
Description Wide letter spacing across all components.
$kendo-letter-spacing-wider	Number	`.10px`	`0.1px`
Description Slightly wider than the wide letter spacing across all components.
$kendo-letter-spacing-widest	Number	`.15px`	`0.15px`
Description The widest letter spacing across all components.
$kendo-font-family-sans	List	`Arial, Verdana, Tahoma, "Trebuchet MS", Helvetica, Impact, Gill Sans`	`Arial, Verdana, Tahoma, "Trebuchet MS", Helvetica, Impact, Gill Sans`
Description The sans font family across all components.
$kendo-font-family-serif	List	`"Times New Roman", Georgia, Garamond, Palatino, Baskerville`	`"Times New Roman", Georgia, Garamond, Palatino, Baskerville`
Description The serif font family across all components.
$kendo-font-sizes	Map	`k-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-heights	Map	`k-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-weights	Map	`k-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-spacings	Map	`k-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-families	Map	`k-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

Name	Type	Default value	Computed value
$kendo-window-border-width	Number	`1px`	`1px`
Description Width of the border around the window.
$kendo-window-border-radius	Number	`k-map-get( $kendo-border-radii, md )`	`0.25rem`
Description Border radius of the window.
$kendo-window-font-family	Null	`null`	`null`
Description Font family of the window.
$kendo-window-font-size	Number	`$kendo-font-size-md`	`1rem`
Description Font size of the window.
$kendo-window-line-height	Number	`$kendo-line-height-md`	`1.5`
Description Line height of the window.
$kendo-window-titlebar-padding-x	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description Horizontal padding of the window titlebar.
$kendo-window-titlebar-padding-y	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description Vertical padding of the window titlebar.
$kendo-window-titlebar-spacing	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description Spacing between title and actions in window titlebar.
$kendo-window-titlebar-border-width	Null	`null`	`null`
Description Width of the top border of the window titlebar.
$kendo-window-titlebar-border-style	String	`solid`	`solid`
Description Style of the top border of the window titlebar.
$kendo-window-title-font-size	Number	`$kendo-font-size-lg`	`1.25rem`
Description Font size of the title of the window.
$kendo-window-title-line-height	Number	`$kendo-line-height-sm`	`1.25`
Description Line height of the title of the window.
$kendo-window-title-font-weight	Null	`null`	`null`
Description Font weight of the title of the window.
$kendo-window-titlebar-actions-spacing	Null	`null`	`null`
Description Spacing between the buttons in the header of the window.
$kendo-window-titlebar-action-opacity	Number	`1`	`1`
Description Opacity of the buttons in the header of the window.
$kendo-window-titlebar-action-hover-opacity	Number	`1`	`1`
Description Opacity of the buttons when hovered in the header of the window.
$kendo-window-inner-padding-x	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description Horizontal padding of the content of the window.
$kendo-window-inner-padding-y	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description Vertical padding of the content of the window.
$kendo-window-actions-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description Horizontal padding of the window action buttons.
$kendo-window-actions-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description Vertical padding of the window action buttons.
$kendo-window-actions-border-width	Number	`1px`	`1px`
Description Width of the top border of the window action buttons.
$kendo-window-actions-spacing	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description Spacing between the action buttons of the window.
$kendo-window-bg	Color	`$kendo-component-bg`	`#ffffff`
Description Background color of the window.
$kendo-window-text	Color	`$kendo-component-text`	`#494949`
Description Text color of the window.
$kendo-window-border	Color	`$kendo-component-border`	`#ededed`
Description Border color of the window.
$kendo-window-shadow	String	`none`	`none`
Description Box shadow around the window.
$kendo-window-focus-shadow	String	`none`	`none`
Description Box shadow around the window when hovered.

Customization

Variables

Common

Accessibility

Actions

Actions-list

Avatar

Badge

Bottom-nav

Bottom-navigation

Captcha

Card

Checkbox

Chip

Color System

Component

Elevation

Icon

List

Progressbar

Radii

Radio

Skeleton

Slider

Spacing

Switch

Table

Tabstrip

Tooltip

Treeview

Typography

Window

Suggested Links

In this article

Not finding the help you need?

Getting Started

Support Resources

Community

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Resources

Productivity and Design Tools

Customization

In this article

Not finding the help you need?