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

Customization

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

Variables

Common

NameTypeDefault valueComputed value
$border-radius

2px

2px

Description
Border radius for all components.
$base-bg

#fafafa

#fafafa

Description
The background of the components' chrome area.
$base-text

$body-text

Description
The text color of the components' chrome area.
$base-border

rgba( black, .08 )

rgba( black, .08 )

Description
The border color of the components' chrome area.
$base-gradient

rgba( black, 0 ), rgba( black, .02 )

rgba( black, 0 ), rgba( black, .02 )

Description
The gradient background of the components' chrome area.
$hovered-bg

try-shade( $base-bg, .5 )

try-shade( $base-bg, .5 )

Description
The background of hovered items.
$hovered-text

$base-text

Description
The text color of hovered items.
$hovered-border

$base-border

rgba( black, .08 )

Description
The border color of hovered items.
$hovered-gradient

$base-gradient

rgba( black, 0 ), rgba( black, .02 )

Description
The gradient background of hovered items.
$selected-bg

$primary

#ff6358

Description
The background of selected items.
$selected-text

contrast-wcag( $selected-bg )

contrast-wcag( $selected-bg )

Description
The text color of selected items.
$selected-border

$base-border

rgba( black, .08 )

Description
The border color of selected items.
$selected-gradient

$base-gradient

rgba( black, 0 ), rgba( black, .02 )

Description
The gradient background of selected items.

Avatar

NameTypeDefault valueComputed value
$kendo-avatar-border-width

1px

1px

Description
Border width of the avatar.
$kendo-avatar-font-family

$font-family

inherit

Description
Font family of the avatar.
$kendo-avatar-font-size

$font-size

14px

Description
Font size of the avatar.
$kendo-avatar-line-height

$line-height

(20 / 14)

Description
Line height of the avatar.
$kendo-avatar-sizes

( sm: map-get( $spacing, 4 ), md: map-get( $spacing, 8 ), lg: map-get( $spacing, 16 ) )

( sm: map-get( $spacing, 4 ), md: map-get( $spacing, 8 ), lg: map-get( $spacing, 16 ) )

Description
The sizes of the avatar.
$kendo-avatar-theme-colors

$theme-colors

Description
Theme colors map of the avatar.

Button

NameTypeDefault valueComputed value
$kendo-button-border-width

1px

1px

Description
Width of the border around the button.
$kendo-button-border-radius

null

null

Description
Border radius of the button.
$kendo-button-padding-x

map-get( $spacing, 2 )

map-get( $spacing, 2 )

Description
Horizontal padding of the button.
$kendo-button-padding-y

map-get( $spacing, 1 )

map-get( $spacing, 1 )

Description
Vertical padding of the button.
$kendo-button-font-family

$font-family

inherit

Description
Font family of the button.
$kendo-button-font-size

$font-size-md

Description
Font sizes of the button.
$kendo-button-line-height

$line-height-md

Description
Line heights used along with $font-size.
$kendo-button-calc-size

calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} + #{$kendo-button-border-width * 2} )

calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} + #{$kendo-button-border-width * 2} )

Description
Calculated height of the button.
$kendo-button-inner-calc-size

calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} )

calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} )

Description
Calculated inner height of the button. Without the border width.
$kendo-button-theme-colors

map-merge( $theme-colors, ( "base": #f5f5f5 ) )

map-merge( $theme-colors, ( "base": #f5f5f5 ) )

Description
Theme colors map for the button.
$kendo-button-bg

#f5f5f5

#f5f5f5

Description
The base background of the button.
$kendo-button-text

#424242

#424242

Description
The base text color of the button.
$kendo-button-border

rgba( black, .08 )

rgba( black, .08 )

Description
The base border color of the button.
$kendo-button-gradient

rgba( black, 0 ), rgba( black, .02 )

rgba( black, 0 ), rgba( black, .02 )

Description
The base background gradient of the button.
$kendo-button-shadow

null

null

Description
The base shadow of the button.
$kendo-button-hover-bg

try-shade( $kendo-button-bg, .5 )

try-shade( $kendo-button-bg, .5 )

Description
The base background of hovered button.
$kendo-button-hover-text

null

null

Description
The base text color of hovered button.
$kendo-button-hover-border

null

null

Description
The base border color of hovered button.
$kendo-button-hover-gradient

null

null

Description
The base background gradient of hovered button.
$kendo-button-hover-shadow

null

null

Description
The base shadow of hovered button.
$kendo-button-active-bg

try-shade( $kendo-button-bg, 1.5 )

try-shade( $kendo-button-bg, 1.5 )

Description
The base background color of active button.
$kendo-button-active-text

null

null

Description
The base text color of active button.
$kendo-button-active-border

null

null

Description
The base border color of active button.
$kendo-button-active-gradient

null

null

Description
The base background gradient of active button.
$kendo-button-active-shadow

null

null

Description
The base shadow of active button.
$kendo-button-selected-bg

$primary

#ff6358

Description
The base background color of selected button.
$kendo-button-selected-text

contrast-wcag( $kendo-button-selected-bg )

contrast-wcag( $kendo-button-selected-bg )

Description
The text color of selected buttons.
$kendo-button-selected-border

$kendo-button-selected-bg

#ff6358

Description
The border color of selected buttons.
$kendo-button-selected-gradient

$kendo-button-active-gradient

null

Description
The background gradient of selected buttons.
$kendo-button-selected-shadow

$kendo-button-active-shadow

null

Description
The base shadow of selected button.
$kendo-button-focus-bg

null

null

Description
The base background of focused button.
$kendo-button-focus-text

null

null

Description
The base text color of focused button.
$kendo-button-focus-border

null

null

Description
The base border color of focused button.
$kendo-button-focus-gradient

null

null

Description
The base background gradient of focused button.
$kendo-button-focus-shadow

0 0 0 2px rgba( $kendo-button-border, .08 )

0 0 0 2px rgba( $kendo-button-border, .08 )

Description
The base shadow of focused button.
$kendo-button-disabled-bg

null

null

Description
The base background of disabled button.
$kendo-button-disabled-text

null

null

Description
The base text color of disabled button.
$kendo-button-disabled-border

null

null

Description
The base border color of disabled buttons.
$kendo-button-disabled-gradient

null

null

Description
The base background gradient of disabled button.
$kendo-button-disabled-shadow

null

null

Description
The base shadow of disabled button.
$kendo-flat-button-hover-opacity

.04

.04

Description
The overlay opacity of hovered flat button. Used to create background for the flat button.
$kendo-flat-button-focus-opacity

null

null

Description
The overlay opacity of focused flat button. Used to create background for the flat button.
$kendo-flat-button-active-opacity

.16

.16

Description
The overlay opacity of active flat button. Used to create background for the flat button.
$kendo-flat-button-selected-opacity

.2

.2

Description
The overlay opacity of selected flat button. Used to create background for the flat button.
$kendo-button-transition

color .2s ease-in-out

color .2s ease-in-out

Description
The color transition of the flat button.

Charts

NameTypeDefault valueComputed value
$series-a

#ff6358

#ff6358

Description
The first base series color and its light and dark shades.
$series-b

#ffe162

#ffe162

Description
The second base series color and its light and dark shades.
$series-c

#4cd180

#4cd180

Description
The third base series color and its light and dark shades.
$series-d

#4b5ffa

#4b5ffa

Description
The fourth base series color and its light and dark shades.
$series-e

#ac58ff

#ac58ff

Description
The fifth base series color and its light and dark shades.
$series-f

#ff5892

#ff5892

Description
The sixth base series color and its light and dark shades.
$series-1

$series-a

#ff6358

Description
The series colors in order:
base, light, dark, lighter, darker
$chart-major-lines

rgba( if( $dark-theme, $white, $black ), .08 )

rgba( if( $dark-theme, $white, $black ), .08 )

Description
The color of the Chart grid lines (major).
$chart-minor-lines

rgba( if( $dark-theme, $white, $black ), .04 )

rgba( if( $dark-theme, $white, $black ), .04 )

Description
The color of the Chart grid lines (minor).

Checkbox

NameTypeDefault valueComputed value
$kendo-checkbox-border-width

1px

1px

Description
Border width of checkbox.
$kendo-checkbox-bg

$component-bg

$body-bg

Description
Background color of checkbox.
$kendo-checkbox-text

null

null

Description
Color of checkbox.
$kendo-checkbox-border

$component-border

rgba( if( $dark-theme, $white, $black ), .08 )

Description
Border color of checkbox.
$kendo-checkbox-hover-bg

null

null

Description
Background color of hovered checkbox.
$kendo-checkbox-hover-text

null

null

Description
Color of hovered checkbox.
$kendo-checkbox-hover-border

null

null

Description
Border color of hovered checkbox.
$kendo-checkbox-checked-bg

$primary

#ff6358

Description
Background color of checked checkbox.
$kendo-checkbox-checked-text

contrast-wcag( $kendo-checkbox-checked-bg )

contrast-wcag( $kendo-checkbox-checked-bg )

Description
Color of checked checkbox.
$kendo-checkbox-checked-border

$kendo-checkbox-checked-bg

#ff6358

Description
Border color of checked checkbox.
$kendo-checkbox-indeterminate-bg

$kendo-checkbox-bg

$body-bg

Description
Background color of indeterminate checkbox.
$kendo-checkbox-indeterminate-text

$kendo-checkbox-checked-bg

#ff6358

Description
Color of indeterminate checkbox.
$kendo-checkbox-indeterminate-border

$kendo-checkbox-border

rgba( if( $dark-theme, $white, $black ), .08 )

Description
Border color of indeterminate checkbox.
$kendo-checkbox-focus-border

null

null

Description
Border color of focused checkbox.
$kendo-checkbox-focus-shadow

0 0 0 2px rgba(0, 0, 0, .06)

0 0 0 2px rgba(0, 0, 0, .06)

Description
Box shadow of focused checkbox.
$kendo-checkbox-focus-checked-border

null

null

Description
Border color of focused and checked checkbox.
$kendo-checkbox-focus-checked-shadow

0 0 0 2px rgba( $primary, .3 )

0 0 0 2px rgba( $primary, .3 )

Description
Box shadow of focused and checked checkbox.
$kendo-checkbox-disabled-bg

null

null

Description
Background color of disabled checkbox.
$kendo-checkbox-disabled-text

null

null

Description
Color of disabled checkbox.
$kendo-checkbox-disabled-border

null

null

Description
Border color of disabled checkbox.
$kendo-checkbox-disabled-checked-bg

null

null

Description
Background color of disabled and checked checkbox.
$kendo-checkbox-disabled-checked-text

null

null

Description
Color of disabled and checked checkbox.
$kendo-checkbox-disabled-checked-border

null

null

Description
Border color of disabled and checked checkbox.
$kendo-checkbox-invalid-bg

null

null

Description
Background color of invalid checkbox.
$kendo-checkbox-invalid-text

$invalid-text

Description
Color of invalid checkbox.
$kendo-checkbox-invalid-border

$invalid-border

Description
Border color of invalid checkbox.
$kendo-checkbox-indicator-type

image

image

Description
Type of checkbox indicator.
$kendo-checkbox-glyph-font-family

"WebComponentsIcons", monospace

"WebComponentsIcons", monospace

Description
Glyph font family of checkbox indicator.
$kendo-checkbox-checked-glyph

"\e118"

"\e118"

Description
Glyph of checkbox indicator.
$kendo-checkbox-indeterminate-glyph

"\e121"

"\e121"

Description
Glyph of indeterminate checkbox indicator.
$kendo-checkbox-checked-image

escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-checked-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") )

escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-checked-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") )

Description
Image of checked checkbox indicator.
$kendo-checkbox-indeterminate-image

escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-indeterminate-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M4,8 h8'/></svg>") )

escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-indeterminate-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M4,8 h8'/></svg>") )

Description
Image image of checked checkbox indicator.
$kendo-checkbox-label-margin-x

map-get( $spacing, 1 )

map-get( $spacing, 1 )

Description
The horizontal margin of the checkbox inside a label.
$kendo-checkbox-list-spacing

map-get( $spacing, 4 )

map-get( $spacing, 4 )

Description
Spacing between items of horizontal checkbox list.
$kendo-checkbox-list-item-padding-x

0px

0px

Description
Horizontal padding of checkbox list items.
$kendo-checkbox-list-item-padding-y

$kendo-list-item-padding-y-md

Description
Vertical padding of checkbox list items.
$kendo-checkbox-ripple-bg

$kendo-checkbox-checked-bg

#ff6358

Description
Background color of checkbox ripple.
$kendo-checkbox-ripple-opacity

.25

.25

Description
Opacity of checkbox ripple.

Chip

NameTypeDefault valueComputed value
$kendo-chip-border-width

1px

1px

Description
Width of the border around the button.
$kendo-chip-spacing

map-get( $spacing, 1 )

map-get( $spacing, 1 )

Description
The spacing between the text and the icons of the chip.
$kendo-chip-padding-x

map-get( $spacing, 1 )

map-get( $spacing, 1 )

Description
Horizontal padding of the chip.
$kendo-chip-padding-y

map-get( $spacing, 1 )

map-get( $spacing, 1 )

Description
Vertical padding of the chip.
$kendo-chip-font-size

$font-size-md

Description
Font sizes of the chip.
$kendo-chip-line-height

1

1

Description
Line heights of the chip that are connected to the $font-size.
$kendo-chip-sizes

( sm: ( padding-x: $kendo-chip-padding-x-sm, padding-y: $kendo-chip-padding-y-sm, font-size: $kendo-chip-font-size-sm, line-height: $kendo-chip-line-height-sm ), md: ( padding-x: $kendo-chip-padding-x-md, padding-y: $kendo-chip-padding-y-md, font-size: $kendo-chip-font-size-md, line-height: $kendo-chip-line-height-md ), lg: ( padding-x: $kendo-chip-padding-x-lg, padding-y: $kendo-chip-padding-y-lg, font-size: $kendo-chip-font-size-lg, line-height: $kendo-chip-line-height-lg ) )

( sm: ( padding-x: $kendo-chip-padding-x-sm, padding-y: $kendo-chip-padding-y-sm, font-size: $kendo-chip-font-size-sm, line-height: $kendo-chip-line-height-sm ), md: ( padding-x: $kendo-chip-padding-x-md, padding-y: $kendo-chip-padding-y-md, font-size: $kendo-chip-font-size-md, line-height: $kendo-chip-line-height-md ), lg: ( padding-x: $kendo-chip-padding-x-lg, padding-y: $kendo-chip-padding-y-lg, font-size: $kendo-chip-font-size-lg, line-height: $kendo-chip-line-height-lg ) )

Description
Sizes map for the chip.
$kendo-chip-base-bg

if( $dark-theme, contrast-wcag($kendo-button-text), $kendo-button-text )

if( $dark-theme, contrast-wcag($kendo-button-text), $kendo-button-text )

Description
The base background of the chip.
$kendo-chip-theme-colors

( "base": $kendo-chip-base-bg, "error": map-get($theme-colors, "error"), "info": map-get($theme-colors, "info"), "warning": map-get($theme-colors, "warning"), "success": map-get($theme-colors, "success") )

( "base": $kendo-chip-base-bg, "error": map-get($theme-colors, "error"), "info": map-get($theme-colors, "info"), "warning": map-get($theme-colors, "warning"), "success": map-get($theme-colors, "success") )

Description
Theme colors map for the chip.
$kendo-chip-solid-bg

try-tint( $kendo-chip-base-bg, 92% )

try-tint( $kendo-chip-base-bg, 92% )

Description
The base background color of solid chip.
$kendo-chip-solid-text

$kendo-chip-base-bg

if( $dark-theme, contrast-wcag($kendo-button-text), $kendo-button-text )

Description
The base text color of solid chip.
$kendo-chip-solid-border

try-tint( $kendo-chip-base-bg, 70% )

try-tint( $kendo-chip-base-bg, 70% )

Description
The base border color of solid chip.
$kendo-chip-solid-shadow

0 0 0 2px rgba( $kendo-chip-base-bg, .16 )

0 0 0 2px rgba( $kendo-chip-base-bg, .16 )

Description
The base shadow of solid chip.
$kendo-chip-solid-focus-bg

try-tint( $kendo-chip-base-bg, 92% )

try-tint( $kendo-chip-base-bg, 92% )

Description
The base background color of focused solid chip.
$kendo-chip-solid-focus-text

null

null

Description
The base text color of focused solid chip.
$kendo-chip-solid-hover-bg

try-tint( $kendo-chip-base-bg, 84% )

try-tint( $kendo-chip-base-bg, 84% )

Description
The base background color of hovered solid chip.
$kendo-chip-solid-hover-text

null

null

Description
The base text color of hovered solid chip.
$kendo-chip-solid-selected-bg

try-tint( $kendo-chip-base-bg, 76% )

try-tint( $kendo-chip-base-bg, 76% )

Description
The base background color of selected solid chip.
$kendo-chip-solid-selected-text

null

null

Description
The base text color of selected solid chip.
$kendo-chip-outline-bg

$component-bg

$body-bg

Description
The base background color of outline chip.
$kendo-chip-outline-text

$kendo-chip-base-bg

if( $dark-theme, contrast-wcag($kendo-button-text), $kendo-button-text )

Description
The base text color of outline chip.
$kendo-chip-outline-border

$kendo-chip-base-bg

if( $dark-theme, contrast-wcag($kendo-button-text), $kendo-button-text )

Description
The base border color of outline chip.
$kendo-chip-outline-shadow

0 0 0 2px rgba( $kendo-chip-base-bg, .16 )

0 0 0 2px rgba( $kendo-chip-base-bg, .16 )

Description
The base shadow of outline chip.
$kendo-chip-outline-hover-bg

$kendo-chip-base-bg

if( $dark-theme, contrast-wcag($kendo-button-text), $kendo-button-text )

Description
The base background color of hovered outline chip.
$kendo-chip-outline-hover-text

contrast-wcag( $kendo-chip-base-bg )

contrast-wcag( $kendo-chip-base-bg )

Description
The base text color of hovered outline chip.
$kendo-chip-outline-selected-bg

$kendo-chip-outline-hover-bg

if( $dark-theme, contrast-wcag($kendo-button-text), $kendo-button-text )

Description
The base background color of selected outline chip.
$kendo-chip-outline-selected-text

$kendo-chip-outline-hover-text

contrast-wcag( $kendo-chip-base-bg )

Description
The base text color of selected outline chip.
$kendo-chip-list-sizes

( sm: map-get( $spacing, 1 ), md: map-get( $spacing, 1 ), lg: map-get( $spacing, 1 ) )

( sm: map-get( $spacing, 1 ), md: map-get( $spacing, 1 ), lg: map-get( $spacing, 1 ) )

Description
The sizes of the chip list.

Color System

NameTypeDefault valueComputed value
$accentColor

#ff6358

#ff6358

Deprecated
Will be removed in v5. Use `$primary` variable instead.
Description
The color that focuses the user attention.
$accent-contrastColor

contrast-wcag( $accent )

contrast-wcag( $accent )

Deprecated
Will be removed in v5. Use `$primary-contrast` variable instead.
Description
The color used along with the accent color denoted by $primary.
$primaryColor

#ff6358

#ff6358

Description
The color that focuses the user attention.
Used for primary buttons and for elements of primary importance across the theme.
$primary-contrastColor

contrast-wcag( $primary )

contrast-wcag( $primary )

Description
The color used along with the accent color denoted by $primary.
Used to provide contrast between the background and foreground colors.
$secondaryColor

#666666

#666666

Description
The secondary color of the theme.
$secondary-contrastColor

contrast-wcag( $secondary )

contrast-wcag( $secondary )

Description
The color used along with the secondary color denoted by $secondary.
Used to provide contrast between the background and foreground colors.
$tertiaryColor

#03a9f4

#03a9f4

Description
The tertiary color of the theme.
$tertiary-contrastColor

contrast-wcag( $tertiary )

contrast-wcag( $tertiary )

Description
The color used along with the tertiary color denoted by $tertiary.
Used to provide contrast between the background and foreground colors.
$infoColor

#0058e9

#0058e9

Description
The color for informational messages and states.
$successColor

#37b400

#37b400

Description
The color for success messages and states.
$warningColor

#ffc000

#ffc000

Description
The color for warning messages and states.
$errorColor

#f31700

#f31700

Description
The color for error messages and states.
$darkColor

#424242

#424242

Description
The dark color of the theme.
$lightColor

#ebebeb

#ebebeb

Description
The light color of the theme.
$inverse

if( $dark-theme, $light, $dark )

if( $dark-theme, $light, $dark )

Description
Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark

Component

NameTypeDefault valueComputed value
$component-bg

$body-bg

Description
Background color of a component.
Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$grid-bg: $component-bg !defualt;`.
$component-text

$body-text

Description
Text color of a component.
Note: do not use this variable directly. Instead derive it as `$component-name-text` e.g. `$grid-text: component-text !default;`.
$component-border

rgba( if( $dark-theme, $white, $black ), .08 )

rgba( if( $dark-theme, $white, $black ), .08 )

Description
Border color of a component.
Note: do not use this variable directly. Instead derive it as `$component-name-border` e.g. `$grid-border: component-border !default;`.

Floating-action-button

NameTypeDefault valueComputed value
$kendo-fab-border-width

1px

1px

Description
Width of the border around the FAB.
$kendo-fab-border-radius

$border-radius

2px

Description
Border radius of the FAB.
$kendo-fab-font-family

$font-family

inherit

Description
Font family of the FAB.
$kendo-fab-font-size

$font-size

14px

Description
Font size of the FAB.
$kendo-fab-line-height

$line-height

(20 / 14)

Description
Line height of the FAB.
$kendo-fab-padding-x

map-get( $spacing, 4 )

map-get( $spacing, 4 )

Description
Horizontal padding of the FAB.
$kendo-fab-padding-y

$kendo-fab-padding-x

map-get( $spacing, 4 )

Description
Vertical padding of the FAB.
$kendo-fab-icon-width

20px

20px

Description
FAB icon width.
$kendo-fab-icon-height

$kendo-fab-icon-width

20px

Description
FAB icon height.
$kendo-fab-icon-spacing

map-get( $spacing, 1 ) / 2

map-get( $spacing, 1 ) / 2

Description
FAB icon spacing.
$kendo-fab-items-padding-x

0px

0px

Description
FAB items horizontal padding.
$kendo-fab-items-padding-y

map-get( $spacing, 4 )

map-get( $spacing, 4 )

Description
FAB items vertical padding.
$kendo-fab-item-text-padding-x

map-get( $spacing, 1 )

map-get( $spacing, 1 )

Description
FAB item text horizontal padding.
$kendo-fab-item-text-padding-y

$kendo-fab-item-text-padding-x

map-get( $spacing, 1 )

Description
FAB item text vertical padding.
$kendo-fab-item-text-border-width

1px

1px

Description
Width of the FAB item text border.
$kendo-fab-item-text-border-radius

2px

2px

Description
Border radius of the FAB item text.
$kendo-fab-item-text-font-size

$font-size-xs

Description
Font size of the FAB item text.
$kendo-fab-item-text-line-height

1.2

1.2

Description
Line height of the FAB item text.
$kendo-fab-item-icon-padding-x

map-get( $spacing, 2 )

map-get( $spacing, 2 )

Description
FAB item icon horizontal padding.
$kendo-fab-item-icon-padding-y

$kendo-fab-item-icon-padding-x

map-get( $spacing, 2 )

Description
FAB item icon vertical padding.
$kendo-fab-item-icon-border-width

0

0

Description
Width of the FAB item icon border.
$kendo-fab-item-icon-border-radius

50%

50%

Description
Border radius of the FAB item icon.
$kendo-fab-item-icon-width

20px

20px

Description
Width of the FAB item icon.
$kendo-fab-item-icon-height

$kendo-fab-item-icon-width

20px

Description
Height of the FAB item icon.
$kendo-fab-theme-colors

$theme-colors

Description
Theme colors map for the FAB.
$kendo-fab-shadow

0 6px 10px rgba(0, 0, 0, .14), 0 1px 18px rgba(0, 0, 0, .12), 0 3px 5px rgba(0, 0, 0, .2)

0 6px 10px rgba(0, 0, 0, .14), 0 1px 18px rgba(0, 0, 0, .12), 0 3px 5px rgba(0, 0, 0, .2)

Description
The base shadow of the FAB.
$kendo-fab-disabled-shadow

0 6px 10px try-tint( rgba(0, 0, 0, .14), .5 ), 0 1px 18px try-tint( rgba(0, 0, 0, .12), .5 ), 0 3px 5px try-tint( rgba(0, 0, 0, .2), .5 )

0 6px 10px try-tint( rgba(0, 0, 0, .14), .5 ), 0 1px 18px try-tint( rgba(0, 0, 0, .12), .5 ), 0 3px 5px try-tint( rgba(0, 0, 0, .2), .5 )

Description
The disabled shadow of the FAB.
$kendo-fab-active-shadow

null

null

Description
The active shadow of the FAB.
$kendo-fab-item-text

$component-text

Description
The base text color of the FAB item.
$kendo-fab-item-bg

$component-bg

Description
The base background color of the FAB item.
$kendo-fab-item-border

$component-border

rgba( if( $dark-theme, $white, $black ), .08 )

Description
The base border color of the FAB item.
$kendo-fab-item-icon-text

$kendo-button-text

#424242

Description
The base text color of the FAB item icon.
$kendo-fab-item-icon-bg

$kendo-button-bg

#f5f5f5

Description
The base background color of the FAB item icon.
$kendo-fab-item-icon-border

$kendo-button-border

rgba( black, .08 )

Description
The base border color of the FAB item icon.
$kendo-fab-item-shadow

$kendo-fab-shadow

0 6px 10px rgba(0, 0, 0, .14), 0 1px 18px rgba(0, 0, 0, .12), 0 3px 5px rgba(0, 0, 0, .2)

Description
The base shadow of the FAB item.
$kendo-fab-item-disabled-shadow

$kendo-fab-disabled-shadow

0 6px 10px try-tint( rgba(0, 0, 0, .14), .5 ), 0 1px 18px try-tint( rgba(0, 0, 0, .12), .5 ), 0 3px 5px try-tint( rgba(0, 0, 0, .2), .5 )

Description
The disabled shadow of the FAB item.
$kendo-fab-item-active-shadow

$kendo-fab-active-shadow

null

Description
The active shadow of the FAB item.

Grid

NameTypeDefault valueComputed value
$grid-bg

$component-bg

Description
Background color of the grid component
$grid-text

$component-text

Description
Text color of the grid component
$grid-border

$component-border

rgba( if( $dark-theme, $white, $black ), .08 )

Description
Border color of the grid component
$grid-header-bg

$header-bg

Description
Background color of grid header
$grid-header-text

$header-text

Description
Text color of grid header
$grid-header-border

$grid-border

rgba( if( $dark-theme, $white, $black ), .08 )

Description
Border color of grid header
$grid-header-gradient

$header-gradient

Description
Background gradient of grid header
$grid-footer-bg

$grid-header-bg

Description
Background color of grid footer
$grid-footer-text

$grid-header-text

Description
Text color of grid footer
$grid-footer-border

$grid-header-border

rgba( if( $dark-theme, $white, $black ), .08 )

Description
Border color of grid footer
$grid-alt-bg

rgba( contrast-wcag( $grid-bg ), .04 )

rgba( contrast-wcag( $grid-bg ), .04 )

Description
Background color of alternating rows in grid
$grid-alt-text

null

null

Description
Text color of alternating rows in grid
$grid-alt-border

null

null

Description
Border color of alternating rows in grid
$grid-hovered-bg

darken($grid-bg, 7%)

darken($grid-bg, 7%)

Description
Background color of hovered rows in grid
$grid-hovered-text

null

null

Description
Text color of hovered rows in grid
$grid-hovered-border

null

null

Description
Border color of hovered rows in grid
$grid-selected-bg

rgba($selected-bg, .25)

rgba($selected-bg, .25)

Description
Background color of selected rows in grid
$grid-selected-text

null

null

Description
Text color of selected rows in grid
$grid-selected-border

null

null

Description
Border color of selected rows in grid

Icons

NameTypeDefault valueComputed value
$icon-font-url

null

null

Description
The URL to the icon font that will be used by the theme
The default value of `null` embeds the package font with a `data:` URL

List

NameTypeDefault valueComputed value
$kendo-list-font-size

null

null

Description
Font size of the list component, if no size is set.
$kendo-list-line-height

null

null

Description
Line height of the list component, if no size is set.
$kendo-list-header-padding-x

null

null

Description
Horizontal padding of list header, if no size is set.
$kendo-list-header-padding-y

null

null

Description
Vertical padding of list header, if no size is set.
$kendo-list-header-border-width

0 0 1px

0 0 1px

Description
Border width of list header.
$kendo-list-header-font-size

null

null

Description
Font size of list header, if no size is set.
$kendo-list-header-line-height

null

null

Description
Line height of list header, if no size is set.
$kendo-list-header-font-weight

null

null

Description
Font weight of list header.
$kendo-list-item-padding-x

null

null

Description
Horizontal padding of list items, when no size is set.
$kendo-list-item-padding-y

null

null

Description
Vertical padding of list items, when no size is set.
$kendo-list-item-font-size

null

null

Description
Font size of list items, if no size is set.
$kendo-list-item-line-height

null

null

Description
Line height of list items, if no size is set.
$kendo-list-group-item-padding-x

null

null

Description
Horizontal padding of list group items, when no size is set.
$kendo-list-group-item-padding-y

null

null

Description
Vertical padding of list group items, when no size is set.
$kendo-list-group-item-border-width

1px 0 0

1px 0 0

Description
Border width of list group items.
$kendo-list-group-item-font-size

null

null

Description
Font size of list group items, if no size is set.
$kendo-list-group-item-line-height

null

null

Description
Line height of list group items, if no size is set.
$kendo-list-group-item-font-weight

null

null

Description
Font weight of list group item.
$kendo-list-bg

$component-bg

Description
Background color of the list component.
$kendo-list-text

$component-text

Description
Text color of the list component.
$kendo-list-border

$component-border

rgba( if( $dark-theme, $white, $black ), .08 )

Description
Border color of the list component.
$kendo-list-header-bg

null

null

Description
Background color of list header.
$kendo-list-header-text

null

null

Description
Text color of list header.
$kendo-list-header-border

inherit

inherit

Description
Border color of list header.
$kendo-list-header-shadow

0 5px 10px 0 rgba(0, 0, 0, .06)

0 5px 10px 0 rgba(0, 0, 0, .06)

Description
Box shadow of list header.
$kendo-list-item-bg

null

null

Description
Background color of list items.
$kendo-list-item-text

null

null

Description
Text color of list items.
$kendo-list-item-hover-bg

$hovered-bg

try-shade( $base-bg, .5 )

Description
Background color of hovered list items.
$kendo-list-item-hover-text

$hovered-text

$base-text

Description
Text color of hovered list items.
$kendo-list-item-focus-bg

null

null

Description
Background color of focused list items.
$kendo-list-item-focus-text

null

null

Description
Text color of focused list items.
$kendo-list-item-focus-shadow

inset 0 0 0 2px rgba(0, 0, 0, .12)

inset 0 0 0 2px rgba(0, 0, 0, .12)

Description
Box shadow of focused list items.
$kendo-list-item-selected-bg

$selected-bg

$primary

Description
Background color of selected list items.
$kendo-list-item-selected-text

$selected-text

contrast-wcag( $selected-bg )

Description
Text color of selected list items.
$kendo-list-group-item-bg

null

null

Description
Background color of list group items.
$kendo-list-group-item-text

null

null

Description
Text color of list group items.
$kendo-list-group-item-border

inherit

inherit

Description
The border color of list group items.
$kendo-list-group-item-shadow

null

null

Description
The base shadow of list group items.
$kendo-list-no-data-text

$subtle-text

Description
Text color of the 'No Data' text.

Menu

NameTypeDefault valueComputed value
$kendo-menu-popup-padding-x

null

null

Description
Horizontal padding of the menu popup.
$kendo-menu-popup-padding-y

null

null

Description
Vertical padding of the menu popup.
$kendo-menu-popup-border-width

$popup-border-width

Description
Width of the border around the menu popup.
$kendo-menu-popup-font-size

$font-size-md

Description
Font sizes of the menu popup.
$kendo-menu-popup-line-height

$line-height-md

Description
Line heights used along with $font-size.
$kendo-menu-popup-bg

$popup-bg

Description
The background of the menu popup.
$kendo-menu-popup-text

$popup-text

Description
The text color of the menu popup.
$kendo-menu-popup-border

$popup-border

Description
The border color of the menu popup.
$kendo-menu-popup-gradient

null

null

Description
The background gradient of the menu popup.
$kendo-menu-popup-item-padding-x

map-get( $spacing, 2 )

map-get( $spacing, 2 )

Description
Horizontal padding of the menu item in popup.
$kendo-menu-popup-item-padding-y

map-get( $spacing, 1 )

map-get( $spacing, 1 )

Description
Vertical padding of the menu item in popup.
$kendo-menu-popup-item-padding-end

calc( #{$kendo-menu-popup-item-padding-x * 2} + #{$icon-size} )

calc( #{$kendo-menu-popup-item-padding-x * 2} + #{$icon-size} )

Description
The end padding of the menu item in popup.
$kendo-menu-popup-item-icon-margin-start-sm

$kendo-menu-popup-item-padding-x-sm

Description
The start margin of the menu item expand icon.
$kendo-menu-popup-item-icon-margin-end-sm

calc( -1 * (#{$kendo-menu-popup-item-padding-end-sm} - #{$kendo-menu-popup-item-padding-x-sm / 2}) )

calc( -1 * (#{$kendo-menu-popup-item-padding-end-sm} - #{$kendo-menu-popup-item-padding-x-sm / 2}) )

Description
The end margin of the menu item expand icon.
$kendo-menu-popup-item-spacing

0px

0px

Description
The spacing between the menu items in popup.
$kendo-menu-popup-item-bg

null

null

Description
The background of the menu item in popup.
$kendo-menu-popup-item-text

null

null

Description
The text color of the menu item in popup.
$kendo-menu-popup-item-border

null

null

Description
The border color of the menu item in popup.
$kendo-menu-popup-item-gradient

null

null

Description
The background gradient of the menu item in popup.
$kendo-menu-popup-item-hover-bg

$kendo-list-item-hover-bg

try-shade( $base-bg, .5 )

Description
The background of hovered menu item in popup.
$kendo-menu-popup-item-hover-text

$kendo-list-item-hover-text

$base-text

Description
The text color of hovered menu item in popup.
$kendo-menu-popup-item-hover-border

null

null

Description
The border color of hovered menu item in popup.
$kendo-menu-popup-item-hover-gradient

null

null

Description
The background gradient of hovered menu item in popup.
$kendo-menu-popup-item-expanded-bg

$kendo-list-item-selected-bg

$primary

Description
The background of expanded menu item in popup.
$kendo-menu-popup-item-expanded-text

$kendo-list-item-selected-text

contrast-wcag( $selected-bg )

Description
The text color of expanded menu item in popup.
$kendo-menu-popup-item-expanded-border

null

null

Description
The border color of expanded menu item in popup.
$kendo-menu-popup-item-expanded-gradient

null

null

Description
The background gradient of expanded menu item in popup.
$kendo-menu-popup-item-focus-shadow

$menu-item-focus-shadow

Description
The base shadow of focused menu item in popup.

Radio

NameTypeDefault valueComputed value
$kendo-radio-radius

50%

50%

Description
Border radius of radio button.
$kendo-radio-border-width

1px

1px

Description
Border width of radio button.
$kendo-radio-bg

$kendo-checkbox-bg

$body-bg

Description
Background color of radio button.
$kendo-radio-text

$kendo-checkbox-text

null

Description
Color of radio button.
$kendo-radio-border

$kendo-checkbox-border

rgba( if( $dark-theme, $white, $black ), .08 )

Description
Border color of radio button.
$kendo-radio-hover-bg

$kendo-checkbox-hover-bg

null

Description
Background color of hovered radio button.
$kendo-radio-hover-text

$kendo-checkbox-hover-text

null

Description
Color of hovered radio button.
$kendo-radio-hover-border

$kendo-checkbox-hover-border

null

Description
Border color of hovered radio button.
$kendo-radio-checked-bg

$kendo-checkbox-checked-bg

#ff6358

Description
Background color of checked radio button.
$kendo-radio-checked-text

$kendo-checkbox-checked-text

contrast-wcag( $kendo-checkbox-checked-bg )

Description
Color of checked radio button.
$kendo-radio-checked-border

$kendo-checkbox-checked-border

#ff6358

Description
Border color of checked radio button.
$kendo-radio-focus-border

$kendo-checkbox-focus-border

null

Description
Border color of focused radio button.
$kendo-radio-focus-shadow

$kendo-checkbox-focus-shadow

0 0 0 2px rgba(0, 0, 0, .06)

Description
Box shadow of focused radio button.
$kendo-radio-focus-checked-border

$kendo-checkbox-focus-checked-border

null

Description
Border color of focused and checked radio button.
$kendo-radio-focus-checked-shadow

$kendo-checkbox-focus-checked-shadow

0 0 0 2px rgba( $primary, .3 )

Description
Box shadow of focused and checked radio button.
$kendo-radio-disabled-bg

$kendo-checkbox-disabled-bg

null

Description
Background color of disabled radio button.
$kendo-radio-disabled-text

$kendo-checkbox-disabled-text

null

Description
Color of disabled radio button.
$kendo-radio-disabled-border

$kendo-checkbox-disabled-border

null

Description
Border color of disabled radio button.
$kendo-radio-disabled-checked-bg

$kendo-checkbox-disabled-checked-bg

null

Description
Background color of disabled and checked radio button.
$kendo-radio-disabled-checked-text

$kendo-checkbox-disabled-checked-text

null

Description
Color of disabled and checked radio button.
$kendo-radio-disabled-checked-border

$kendo-checkbox-disabled-checked-border

null

Description
Border color of disabled and checked radio button.
$kendo-radio-invalid-bg

$kendo-checkbox-invalid-bg

null

Description
Background color of invalid radio button.
$kendo-radio-invalid-text

$kendo-checkbox-invalid-text

Description
Color of invalid radio button.
$kendo-radio-invalid-border

$kendo-checkbox-invalid-border

Description
Border color of invalid radio button.
$kendo-radio-indicator-type

image

image

Description
Type of radio button indicator.
$kendo-radio-glyph-font-family

"WebComponentsIcons", monospace

"WebComponentsIcons", monospace

Description
Glyph font family of radio button indicator.
$kendo-radio-checked-glyph

"\e308"

"\e308"

Description
Glyph of radio button indicator.
$kendo-radio-checked-image

escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><circle cx='50%' cy='50%' r='4' fill='#{$kendo-radio-checked-text}'/></svg>") )

escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><circle cx='50%' cy='50%' r='4' fill='#{$kendo-radio-checked-text}'/></svg>") )

Description
Image of checked radio button indicator.
$kendo-radio-disabled-checked-image

null

null

Description
Image of disabled and checked radio button indicator.
$kendo-radio-label-margin-x

map-get( $spacing, 1 )

map-get( $spacing, 1 )

Description
The horizontal margin of the radio button inside of a label.
$kendo-radio-list-spacing

map-get( $spacing, 4 )

map-get( $spacing, 4 )

Description
The horizontal list item margin of radio button.
$kendo-radio-list-item-padding-x

0px

0px

Description
The horizontal list item padding of radio button.
$kendo-radio-list-item-padding-y

$kendo-list-item-padding-y-md

Description
The vertical list item padding of radio button.
$kendo-radio-ripple-bg

$kendo-radio-checked-bg

#ff6358

Description
Background color of radio button ripple.
$kendo-radio-ripple-opacity

.25

.25

Description
Opacity of radio button ripple.

Switch

NameTypeDefault valueComputed value
$kendo-switch-font-family

null

null

Description
Font family of the switch.
$kendo-switch-track-border-width

1px

1px

Description
Border width of the switch track.
$kendo-switch-thumb-border-width

1px

1px

Description
Border width of the switch thumb.
$kendo-switch-label-text-transform

uppercase

uppercase

Description
Text transform of the switch label.
$kendo-switch-label-display

inline

inline

Description
Display of the switch label.
$kendo-switch-sizes

( sm: ( font-size: 10px, track-width: 52px, track-height: 26px, thumb-width: 26px, thumb-height: 26px, thumb-offset: 0px, label-offset: 4px ), md: ( font-size: 10px, track-width: 60px, track-height: 30px, thumb-width: 30px, thumb-height: 30px, thumb-offset: 0px, label-offset: 6px ), lg: ( font-size: 10px, track-width: 68px, track-height: 34px, thumb-width: 34px, thumb-height: 34px, thumb-offset: 0px, label-offset: 8px ) )

( sm: ( font-size: 10px, track-width: 52px, track-height: 26px, thumb-width: 26px, thumb-height: 26px, thumb-offset: 0px, label-offset: 4px ), md: ( font-size: 10px, track-width: 60px, track-height: 30px, thumb-width: 30px, thumb-height: 30px, thumb-offset: 0px, label-offset: 6px ), lg: ( font-size: 10px, track-width: 68px, track-height: 34px, thumb-width: 34px, thumb-height: 34px, thumb-offset: 0px, label-offset: 8px ) )

Description
Map with the different switch sizes.
$kendo-switch-off-track-bg

$component-bg

Description
The background of the track when the switch is not checked.
$kendo-switch-off-track-text

$component-text

Description
The text color of the track when the switch is not checked.
$kendo-switch-off-track-border

try-shade( $kendo-switch-off-track-bg, 8% )

try-shade( $kendo-switch-off-track-bg, 8% )

Description
The border color of the track when the switch is not checked.
$kendo-switch-off-track-gradient

null

null

Description
The background gradient of the track when the switch is not checked.
$kendo-switch-off-track-hover-bg

null

null

Description
The background of the track when the hovered switch is not checked.
$kendo-switch-off-track-hover-text

null

null

Description
The text color of the track when the hovered switch is not checked.
$kendo-switch-off-track-hover-border

null

null

Description
The border color of the track when the hovered switch is not checked.
$kendo-switch-off-track-hover-gradient

null

null

Description
The background gradient of the track when the hovered switch is not checked.
$kendo-switch-off-track-focus-bg

null

null

Description
The background of the track when the focused switch is not checked.
$kendo-switch-off-track-focus-text

null

null

Description
The text color of the track when the focused switch is not checked.
$kendo-switch-off-track-focus-border

null

null

Description
The border color of the track when the focused switch is not checked.
$kendo-switch-off-track-focus-gradient

null

null

Description
The background gradient of the track when the focused switch is not checked.
$kendo-switch-off-track-focus-ring

2px solid rgba( if( $dark-theme, $white, $black ) , .08 )

2px solid rgba( if( $dark-theme, $white, $black ) , .08 )

Description
The ring around the track when the focused switch is not checked.
$kendo-switch-off-track-disabled-bg

null

null

Description
The background of the track when the disabled switch is not checked.
$kendo-switch-off-track-disabled-text

null

null

Description
The text color of the track when the disabled switch is not checked.
$kendo-switch-off-track-disabled-border

null

null

Description
The border color of the track when the disabled switch is not checked.
$kendo-switch-off-track-disabled-gradient

null

null

Description
The background gradient of the track when the disabled switch is not checked.
$kendo-switch-off-thumb-bg

$base-bg

#fafafa

Description
The background of the thumb when the switch is not checked.
$kendo-switch-off-thumb-text

$base-text

$body-text

Description
The text color of the thumb when the switch is not checked.
$kendo-switch-off-thumb-border

$base-border

rgba( black, .08 )

Description
The border color of the thumb when the switch is not checked.
$kendo-switch-off-thumb-gradient

null

null

Description
The background gradient of the thumb when the switch is not checked.
$kendo-switch-off-thumb-hover-bg

null

null

Description
The background of the thumb when the hovered switch is not checked.
$kendo-switch-off-thumb-hover-text

null

null

Description
The text color of the thumb when the hovered switch is not checked.
$kendo-switch-off-thumb-hover-border

null

null

Description
The border color of the thumb when the hovered switch is not checked.
$kendo-switch-off-thumb-hover-gradient

null

null

Description
The background gradient of the thumb when the hovered switch is not checked.
$kendo-switch-on-track-bg

$primary

#ff6358

Description
The background of the track when the switch is checked.
$kendo-switch-on-track-text

contrast-wcag( $kendo-switch-on-track-bg )

contrast-wcag( $kendo-switch-on-track-bg )

Description
The text color of the track when the switch is checked.
$kendo-switch-on-track-border

$kendo-switch-on-track-bg

#ff6358

Description
The border color of the track when the switch is checked.
$kendo-switch-on-track-gradient

null

null

Description
The background gradient of the track when the switch is checked.
$kendo-switch-on-track-hover-bg

null

null

Description
The background of the track when the hovered switch is checked.
$kendo-switch-on-track-hover-text

null

null

Description
The text color of the track when the hovered switch is checked.
$kendo-switch-on-track-hover-border

null

null

Description
The border color of the track when the hovered switch is checked.
$kendo-switch-on-track-hover-gradient

null

null

Description
The background gradient of the track when the hovered switch is checked.
$kendo-switch-on-track-focus-bg

null

null

Description
The background of the track when the focused switch is checked.
$kendo-switch-on-track-focus-text

null

null

Description
The text color of the track when the focused switch is checked.
$kendo-switch-on-track-focus-border

null

null

Description
The border color of the track when the focused switch is checked.
$kendo-switch-on-track-focus-gradient

null

null

Description
The background gradient of the track when the focused switch is checked.
$kendo-switch-on-track-focus-ring

2px solid rgba( $kendo-switch-on-track-border, .25 )

2px solid rgba( $kendo-switch-on-track-border, .25 )

Description
The ring around the track when the focused switch is checked.
$kendo-switch-on-track-disabled-bg

null

null

Description
The background of the track when the disabled switch is checked.
$kendo-switch-on-track-disabled-text

null

null

Description
The text color of the track when the disabled switch is checked.
$kendo-switch-on-track-disabled-border

null

null

Description
The border color of the track when the disabled switch is checked.
$kendo-switch-on-track-disabled-gradient

null

null

Description
The background gradient of the track when the disabled switch is checked.
$kendo-switch-on-thumb-bg

$base-bg

#fafafa

Description
The background of the thumb when the switch is checked.
$kendo-switch-on-thumb-text

$base-text

$body-text

Description
The text color of the thumb when the switch is checked.
$kendo-switch-on-thumb-border

$base-border

rgba( black, .08 )

Description
The border color of the thumb when the switch is checked.
$kendo-switch-on-thumb-gradient

null

null

Description
The background gradient of the thumb when the switch is checked.
$kendo-switch-on-thumb-hover-bg

null

null

Description
The background of the thumb when the hovered switch is checked.
$kendo-switch-on-thumb-hover-text

null

null

Description
The text color of the thumb when the hovered switch is checked.
$kendo-switch-on-thumb-hover-border

null

null

Description
The border color of the thumb when the hovered switch is checked.
$kendo-switch-on-thumb-hover-gradient

null

null

Description
The background gradient of the thumb when the hovered switch is checked.

Table

NameTypeDefault valueComputed value
$kendo-table-border-width

1px

1px

Description
The width of the table border.
$kendo-table-cell-vertical-border-width

$grid-cell-vertical-border-width

Description
The width of vertical border of table cells.
$kendo-table-cell-horizontal-border-width

$grid-cell-horizontal-border-width

Description
The width of horizontal border of table cells.
$kendo-table-font-size

null

null

Description
The font size of the table if no size is specified.
$kendo-table-line-height

null

null

Description
The line-height of the table if no size is specified.
$kendo-table-cell-padding-x

null

null

Description
The horizontal padding of the cells in the table if no size is specified.
$kendo-table-cell-padding-y

null

null

Description
The vertical padding of the cells in the table if no size is specified.
$kendo-table-sizes

( sm: ( font-size: $font-size-md, line-height: $line-height-md, cell-padding-x: map-get( $spacing, 2 ), cell-padding-y: map-get( $spacing, 2 ) - map-get( $spacing, thin ) ), md: ( font-size: $font-size-md, line-height: $line-height-md, cell-padding-x: map-get( $spacing, 2 ), cell-padding-y: map-get( $spacing, 2 ) ), lg: ( font-size: $font-size-md, line-height: $line-height-md, cell-padding-x: map-get( $spacing, 2 ), cell-padding-y: map-get( $spacing, 2 ) + map-get( $spacing, thin ) ) )

( sm: ( font-size: $font-size-md, line-height: $line-height-md, cell-padding-x: map-get( $spacing, 2 ), cell-padding-y: map-get( $spacing, 2 ) - map-get( $spacing, thin ) ), md: ( font-size: $font-size-md, line-height: $line-height-md, cell-padding-x: map-get( $spacing, 2 ), cell-padding-y: map-get( $spacing, 2 ) ), lg: ( font-size: $font-size-md, line-height: $line-height-md, cell-padding-x: map-get( $spacing, 2 ), cell-padding-y: map-get( $spacing, 2 ) + map-get( $spacing, thin ) ) )

Description
The sizes of the table.
$kendo-table-bg

$grid-bg

Description
Background color of tables.
$kendo-table-text

$grid-text

Description
Text color of tables.
$kendo-table-border

$grid-border

rgba( if( $dark-theme, $white, $black ), .08 )

Description
Border color of tables.
$kendo-table-header-bg

$grid-header-bg

Description
Background color of table headers.
$kendo-table-header-text

$grid-header-text

Description
Text color of table headers.
$kendo-table-header-border

$grid-header-border

rgba( if( $dark-theme, $white, $black ), .08 )

Description
Border color of table headers.
$kendo-table-footer-bg

$grid-footer-bg

Description
Background color of table footers.
$kendo-table-footer-text

$grid-footer-text

Description
Text color of table footers.
$kendo-table-footer-border

$grid-footer-border

rgba( if( $dark-theme, $white, $black ), .08 )

Description
Border color of table footers.
$kendo-table-group-row-bg

$kendo-table-header-bg

Description
Background color of group rows in table.
$kendo-table-group-row-text

$kendo-table-header-text

Description
Text color of group rows in table.
$kendo-table-group-row-border

$kendo-table-header-border

rgba( if( $dark-theme, $white, $black ), .08 )

Description
Border color of group rows in table.
$kendo-table-alt-row-bg

$grid-alt-bg

rgba( contrast-wcag( $grid-bg ), .04 )

Description
Background color of alternating rows in table.
$kendo-table-alt-row-text

$grid-alt-text

null

Description
Text color of alternating rows in table.
$kendo-table-alt-row-border

$grid-alt-border

null

Description
Border color of alternating rows in table.
$kendo-table-hover-bg

$grid-hovered-bg

darken($grid-bg, 7%)

Description
Background color of hovered rows in table.
$kendo-table-hover-text

$grid-hovered-text

null

Description
Text color of hovered rows in table.
$kendo-table-hover-border

$grid-hovered-border

null

Description
Border color of hovered rows in table.
$kendo-table-focus-bg

null

null

Description
Background color of focused rows in table.
$kendo-table-focus-text

null

null

Description
Text color of focused rows in table.
$kendo-table-focus-border

null

null

Description
Border color of focused rows in table.
$kendo-table-focus-shadow

$grid-focused-shadow

Description
Box shadow of focused rows in table.
$kendo-table-selected-bg

$grid-selected-bg

rgba($selected-bg, .25)

Description
Background color of selected rows in table.
$kendo-table-selected-text

$grid-selected-text

null

Description
Text color of selected rows in table.
$kendo-table-selected-border

$grid-selected-border

null

Description
Border color of selected rows in table.

Tabstrip

NameTypeDefault valueComputed value
$tabstrip-bg

null

null

Description
Background color of tabstrip component
$tabstrip-text

$component-text

Description
Text color of tabstrip component
$tabstrip-border

$component-border

rgba( if( $dark-theme, $white, $black ), .08 )

Description
Border color of tabstrip component
$tabstrip-item-padding-x

$nav-item-padding-x

Description
Horizontal padding of tabs
$tabstrip-item-padding-y

$nav-item-padding-y

Description
Vertical padding of tabs
$tabstrip-item-border-width

1px

1px

Description
Width of border around tabs
$tabstrip-item-border-radius

$border-radius

2px

Description
Border radius of tabs
$tabstrip-item-gap

$nav-item-margin

Description
Spacing between tabs
$tabstrip-item-bg

null

null

Description
Background color of tabs
$tabstrip-item-text

$link-text

Description
Text color of tabs
$tabstrip-item-border

null

null

Description
Border color of tabs
$tabstrip-item-gradient

null

null

Description
Background gradient of tabs
$tabstrip-item-hovered-bg

null

null

Description
Background color of hovered tabs
$tabstrip-item-hovered-text

$link-hover-text

Description
Text color of hovered tabs
$tabstrip-item-hovered-border

null

null

Description
Border color of hovered tabs
$tabstrip-item-hovered-gradient

null

null

Description
Background gradient of hovered tabs
$tabstrip-item-selected-bg

$component-bg

Description
Background color of selected tabs
$tabstrip-item-selected-text

$component-text

Description
Text color of selected tabs
$tabstrip-item-selected-border

$component-border

rgba( if( $dark-theme, $white, $black ), .08 )

Description
Border color of selected tabs
$tabstrip-item-selected-gradient

null

null

Description
Background gradient of selected tabs
$tabstrip-content-padding-x

map-get( $spacing, 4 )

map-get( $spacing, 4 )

Description
Horizontal padding of tabstrip content
$tabstrip-content-padding-y

map-get( $spacing, 4 )

map-get( $spacing, 4 )

Description
Vertical padding of tabstrip content
$tabstrip-content-border-width

1px

1px

Description
Width of border around tabstrip content
$tabstrip-content-bg

$component-bg

Description
Background color of tabstrip content
$tabstrip-content-text

$component-text

Description
Text color of tabstrip content
$tabstrip-content-border

$component-border

rgba( if( $dark-theme, $white, $black ), .08 )

Description
Border color of tabstrip content
$tabstrip-content-border-focused

$component-text

Description
Border color of tabstrip focused content

Toolbar

NameTypeDefault valueComputed value
$toolbar-padding-x

map-get( $spacing, 2 )

map-get( $spacing, 2 )

Description
The horizontal padding of the container.
$toolbar-padding-y

map-get( $spacing, 2 )

map-get( $spacing, 2 )

Description
The vertical padding of the container.

Treeview

NameTypeDefault valueComputed value
$kendo-treeview-font-family

$font-family

inherit

Description
Font family of the treeview component.
$kendo-treeview-font-size

$font-size-md

Description
Font size of the treeview component.
$kendo-treeview-line-height

$line-height-md

Description
Line height of the treeview component.
$kendo-treeview-indent

16px

16px

Description
Indentation of child groups in treeview component.
$kendo-treeview-item-padding-x

map-get( $spacing, 2 )

map-get( $spacing, 2 )

Description
Horizontal padding of treeview items.
$kendo-treeview-item-padding-y

map-get( $spacing, 1 )

map-get( $spacing, 1 )

Description
Vertical padding of treeview items.
$kendo-treeview-item-border-width

0px

0px

Description
Border width of treeview items.
$kendo-treeview-item-border-radius

$border-radius

2px

Description
Border radius of treeview items.
$kendo-treeview-sizes

( sm: ( font-size: $font-size-md, line-height: $line-height-md, item-padding-x: map-get( $spacing, 2 ), item-padding-y: map-get( $spacing, 1 ) - map-get( $spacing, thin ) ), md: ( font-size: $font-size-md, line-height: $line-height-md, item-padding-x: map-get( $spacing, 2 ), item-padding-y: map-get( $spacing, 1 ) ), lg: ( font-size: $font-size-md, line-height: $line-height-md, item-padding-x: map-get( $spacing, 2 ), item-padding-y: map-get( $spacing, 1 ) + map-get( $spacing, thin ) ) )

( sm: ( font-size: $font-size-md, line-height: $line-height-md, item-padding-x: map-get( $spacing, 2 ), item-padding-y: map-get( $spacing, 1 ) - map-get( $spacing, thin ) ), md: ( font-size: $font-size-md, line-height: $line-height-md, item-padding-x: map-get( $spacing, 2 ), item-padding-y: map-get( $spacing, 1 ) ), lg: ( font-size: $font-size-md, line-height: $line-height-md, item-padding-x: map-get( $spacing, 2 ), item-padding-y: map-get( $spacing, 1 ) + map-get( $spacing, thin ) ) )

Description
The sizes of the treeview.
$kendo-treeview-bg

null

null

Description
Background color of the treeview component.
$kendo-treeview-text

$component-text

Description
Text color of the treeview component.
$kendo-treeview-border

null

null

Description
Border color of the treeview component.
$kendo-treeview-item-hover-bg

$hovered-bg

try-shade( $base-bg, .5 )

Description
Background color of hovered treeview items.
$kendo-treeview-item-hover-text

$hovered-text

$base-text

Description
Text color of hovered treeview items.
$kendo-treeview-item-hover-border

null

null

Description
Border color of hovered treeview items.
$kendo-treeview-item-hover-gradient

null

null

Description
Background gradient of hovered treeview items.
$kendo-treeview-item-selected-bg

$selected-bg

$primary

Description
Background color of selected treeview items.
$kendo-treeview-item-selected-text

$selected-text

contrast-wcag( $selected-bg )

Description
Text color of selected treeview items.
$kendo-treeview-item-selected-border

null

null

Description
Border color of selected treeview items.
$kendo-treeview-item-selected-gradient

null

null

Description
Background gradient of selected treeview items.
$kendo-treeview-item-focus-shadow

$focused-shadow

Description
Box shadow of focused treeview items.
$kendo-treeview-loadmore-bg

transparent

transparent

Description
Background color of load more.
$kendo-treeview-loadmore-text

$link-text

Description
Text color of load more.
$kendo-treeview-loadmore-border

null

null

Description
Border color of load more.
$kendo-treeview-loadmore-hover-bg

transparent

transparent

Description
Background color of a hovered load more.
$kendo-treeview-loadmore-hover-text

$link-hover-text

Description
Text color of a hovered load more.
$kendo-treeview-loadmore-hover-border

null

null

Description
Border color of a hovered load more.
$kendo-treeview-loadmore-focus-bg

transparent

transparent

Description
Background color of a focused load more.
$kendo-treeview-loadmore-focus-text

$link-hover-text

Description
Text color of a focused load more.
$kendo-treeview-loadmore-focus-border

null

null

Description
Border color of a focused load more.
$kendo-treeview-loadmore-focus-shadow

$kendo-treeview-item-focus-shadow

Description
Box shadow of a focused load more.

Typography

NameTypeDefault valueComputed value
$enable-typography

false

false

Description
Global typography styles for the Kendo Default theme.
$font-size

14px

14px

Description
Base font size across all components.
$font-family

inherit

inherit

Description
Font family across all components.
$font-family-monospace

SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace

SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace

Description
Font family for monospaced text. Used for styling the code.
$line-height

(20 / 14)

(20 / 14)

Description
Line height used along with $font-size.

Mixins

exports

Outputs a module once, no matter how many times it is included.

Parameters

  • name : String - The name of the exported module.