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

Customization

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

Variables

Common

NameTypeDefault valueComputed value
$kendo-border-radiusNumber

$border-radius

0.375rem

Description
Border radius for all components.
$base-bgColor

$gray-100

#f8f9fa

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

$body-text

#212529

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

k-try-shade( $base-bg, 1 )

#e4e5e6

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

null

null

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

$gray-200

#e9ecef

Description
The background of hovered items.
$hovered-textColor

$base-text

#212529

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

k-try-shade( $hovered-bg, 1 )

#d6d9dc

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

null

null

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

$primary

#0d6efd

Description
The background of selected items.
$selected-textColor

k-contrast-color( $selected-bg )

white

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

k-try-shade( $selected-bg, 1 )

#0c65e9

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

null

null

Description
The gradient background of selected items.

Avatar

NameTypeDefault valueComputed value
$kendo-avatar-border-widthNumber

1px

1px

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

$font-family

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 of the avatar.
$kendo-avatar-font-sizeNumber

$font-size

1rem

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

$line-height

1.5

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

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

(sm: 1rem, md: 2rem, lg: 4rem)

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

$kendo-theme-colors

("primary": #0d6efd, "secondary": #6c757d, "tertiary": #6f42c1, "info": #0dcaf0, "success": #198754, "warning": #ffc107, "error": #dc3545, "dark": #212529, "light": #f8f9fa, "inverse": #212529)

Description
Theme colors map of the avatar.

Badge

NameTypeDefault valueComputed value
$kendo-badge-border-widthNumber

1px

1px

Description
Width of the border around the badge.
$kendo-badge-border-radiusNumber

$badge-border-radius

0.375rem

Description
Border radius of the badge.
$kendo-badge-padding-xNumber

$badge-padding-x

0.65em

Description
Horizontal padding of the badge.
$kendo-badge-padding-yNumber

$badge-padding-y

0.35em

Description
Vertical padding of the badge.
$kendo-badge-font-sizeNumber

$badge-font-size

0.75em

Description
Font sizes of the badge.
$kendo-badge-line-heightNumber

1

1

Description
Line heights used along with $font-size.
$kendo-badge-min-widthCalculation

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

calc( 1em + 0.7em + 2px)

Description
Badge min width used for circle badge.
$kendo-badge-sizesMap

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

(sm: (padding-x: 0.325em, padding-y: 0.175em, font-size: 0.75em, line-height: 1, min-width: calc( 1em + 0.35em + 2px )), md: (padding-x: 0.65em, padding-y: 0.35em, font-size: 0.75em, line-height: 1, min-width: calc( 1em + 0.7em + 2px )), lg: (padding-x: 0.975em, padding-y: 0.525em, font-size: 0.75em, line-height: 1, min-width: calc( 1em + 1.05em + 2px )))

Description
Sizes map for the badge.

Button

NameTypeDefault valueComputed value
$kendo-button-border-widthNumber

$btn-border-width

1px

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

null

null

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

$btn-padding-x

0.75rem

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

$btn-padding-y

0.375rem

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

$font-family

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 of the button.
$kendo-button-font-sizeNumber

$btn-font-size

1rem

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

$btn-line-height

1.5

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

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

calc( 1.5em + 0.75rem + 2px )

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

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

calc( 1.5em + 0.75rem )

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

k-map-merge( $kendo-theme-colors, ( "base": #e4e7eb ) )

("primary": #0d6efd, "secondary": #6c757d, "tertiary": #6f42c1, "info": #0dcaf0, "success": #198754, "warning": #ffc107, "error": #dc3545, "dark": #212529, "light": #f8f9fa, "inverse": #212529, "base": #e4e7eb)

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

#e4e7eb

#e4e7eb

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

k-contrast-color( $kendo-button-bg, $gray-900 )

#212529

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

$kendo-button-bg

#e4e7eb

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

null

null

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

null

null

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

k-try-darken( $kendo-button-bg, 7.5% )

#ced3db

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

null

null

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

k-try-darken( $kendo-button-bg, 10% )

#c7cdd5

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

null

null

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

null

null

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

k-try-darken( $kendo-button-bg, 10% )

#c7cdd5

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

null

null

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

k-try-darken( $kendo-button-bg, 12.5% )

#bfc6d0

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

null

null

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

null

null

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

k-try-darken( $primary, 10% )

#0257d5

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

k-contrast-color( $kendo-button-selected-bg )

white

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

k-try-darken( $primary, 12.5% )

#0252c9

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

$kendo-button-active-gradient

null

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

$kendo-button-active-shadow

null

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

k-try-darken( $kendo-button-bg, 10% )

#c7cdd5

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

null

null

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

k-try-darken( $kendo-button-bg, 12.5% )

#bfc6d0

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

null

null

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

0 0 0 .25rem rgba( $kendo-button-border, .5 )

0 0 0 0.25rem rgba(228, 231, 235, 0.5)

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

null

null

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

null

null

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

null

null

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

null

null

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

null

null

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

.08

0.08

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

null

null

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

.16

0.16

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

.2

0.2

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

$transition

color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out

Description
The color transition of the button.

Charts

NameTypeDefault valueComputed value
$series-aColor

$blue

#0d6efd

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

$purple

#6f42c1

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

$teal

#20c997

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

$green

#198754

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

$yellow

#ffc107

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

$red

#dc3545

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

$series-a

#0d6efd

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

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

rgba(0, 0, 0, 0.08)

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

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

rgba(0, 0, 0, 0.04)

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

Checkbox

NameTypeDefault valueComputed value
$kendo-checkbox-border-widthNumber

1px

1px

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

$component-bg

#ffffff

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

null

null

Description
Color of checkbox.
$kendo-checkbox-borderColor

if( k-is-light( $kendo-checkbox-bg ), $gray-400, $gray-600 )

#ced4da

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

null

null

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

null

null

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

null

null

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

$primary

#0d6efd

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

k-contrast-color( $kendo-checkbox-checked-bg )

white

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

$kendo-checkbox-checked-bg

#0d6efd

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

$kendo-checkbox-checked-bg

#0d6efd

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

$kendo-checkbox-checked-text

white

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

$kendo-checkbox-checked-border

#0d6efd

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

k-try-tint( $primary, 50% )

#86b7fe

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

0 0 0 .25rem rgba( $primary, .25 )

0 0 0 0.25rem rgba(13, 110, 253, 0.25)

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

$kendo-checkbox-checked-border

#0d6efd

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

$kendo-checkbox-focus-shadow

0 0 0 0.25rem rgba(13, 110, 253, 0.25)

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

null

null

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

null

null

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

null

null

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

null

null

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

null

null

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

null

null

Description
Color of disabled and checked checkbox.
$kendo-checkbox-invalid-bgNull

null

null

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

$invalid-text

#dc3545

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

$invalid-border

#dc3545

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

image

image

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

"WebComponentsIcons", monospace

"WebComponentsIcons", monospace

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

"\e118"

"\e118"

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

"\e121"

"\e121"

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

escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$kendo-checkbox-checked-text}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>") )

url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e")

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

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

url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e")

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

k-map-get( $spacing, 1 )

0.25rem

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

k-map-get( $spacing, 4 )

1rem

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

0px

0px

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

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

0.25rem

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

$kendo-checkbox-checked-bg

#0d6efd

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

.25

0.25

Description
Opacity of checkbox ripple.

Chip

NameTypeDefault valueComputed value
$kendo-chip-border-widthNumber

1px

1px

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

k-map-get( $spacing, 1 )

0.25rem

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

k-map-get( $spacing, 1 )

0.25rem

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

k-map-get( $spacing, 1 )

0.25rem

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

$font-size-md

1rem

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

1.25

1.25

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

( 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: 0.25rem, padding-y: 0.125rem, font-size: 0.875rem, line-height: 1.25), md: (padding-x: 0.25rem, padding-y: 0.25rem, font-size: 1rem, line-height: 1.25), lg: (padding-x: 0.25rem, padding-y: 0.375rem, font-size: 1rem, line-height: 1.25))

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

$base-text

#212529

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

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

("base": #212529, "error": #dc3545, "info": #0dcaf0, "warning": #ffc107, "success": #198754)

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

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

#edeeee

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

$kendo-chip-base-bg

#212529

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

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

#bcbebf

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

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

0 0 0 2px rgba(33, 37, 41, 0.16)

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

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

#edeeee

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

null

null

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

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

#dbdcdd

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

null

null

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

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

#cacbcc

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

null

null

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

$component-bg

#ffffff

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

$kendo-chip-base-bg

#212529

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

$kendo-chip-base-bg

#212529

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

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

0 0 0 2px rgba(33, 37, 41, 0.16)

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

$kendo-chip-base-bg

#212529

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

k-contrast-color( $kendo-chip-base-bg )

white

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

$kendo-chip-outline-hover-bg

#212529

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

$kendo-chip-outline-hover-text

white

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

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

(sm: 0.25rem, md: 0.25rem, lg: 0.25rem)

Description
The sizes of the chip list.

Color System

NameTypeDefault valueComputed value
$accentColor

$primary

#0d6efd

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

k-contrast-color( $accent )

white

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

$primary

#0d6efd

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

k-contrast-color( $primary )

white

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

$secondary

#6c757d

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

k-contrast-color( $secondary )

white

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

$purple

#6f42c1

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

k-contrast-color( $tertiary )

white

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

$info

#0dcaf0

Description
The color for informational messages and states.
$successColor

$success

#198754

Description
The color for success messages and states.
$warningColor

$warning

#ffc107

Description
The color for warning messages and states.
$errorColor

$danger

#dc3545

Description
The color for error messages and states.
$darkColor

$dark

#212529

Description
The dark color of the theme.
$lightColor

$light

#f8f9fa

Description
The light color of the theme.
$inverseColor

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

#212529

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-bgColor

$body-bg

#ffffff

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 !default;`.
$component-textColor

$body-text

#212529

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-borderColor

if( k-is-light( $component-bg ), $gray-300, $gray-700 )

#dee2e6

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-widthNumber

1px

1px

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

$kendo-border-radius / 2

0.1875rem

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

$font-family

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 of the FAB.
$kendo-fab-font-sizeNumber

$font-size

1rem

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

$line-height

1.5

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

$padding-x

1rem

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

$kendo-fab-padding-x

1rem

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

24px

24px

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

$kendo-fab-icon-width

24px

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

k-math-div( k-map-get( $spacing, 1 ), 2 )

0.125rem

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

0px

0px

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

k-map-get( $spacing, 4 )

1rem

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

k-map-get( $spacing, 1 )

0.25rem

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

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

0.25rem

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

1px

1px

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

4px

4px

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

$font-size-xs

0.75rem

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

14px

14px

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

k-map-get( $spacing, 2 )

0.5rem

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

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

0.5rem

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

0

0

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

50%

50%

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

24px

24px

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

$kendo-fab-item-icon-width

24px

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

$kendo-theme-colors

("primary": #0d6efd, "secondary": #6c757d, "tertiary": #6f42c1, "info": #0dcaf0, "success": #198754, "warning": #ffc107, "error": #dc3545, "dark": #212529, "light": #f8f9fa, "inverse": #212529)

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

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

0px 6px 10px rgba(0, 0, 0, 0.14), 0px 1px 18px rgba(0, 0, 0, 0.12), 0px 3px 5px rgba(0, 0, 0, 0.2)

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

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

0px 6px 10px rgba(91, 91, 91, 0.1744), 0px 1px 18px rgba(101, 101, 101, 0.1552), 0px 3px 5px rgba(70, 70, 70, 0.232)

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

null

null

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

$component-text

#212529

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

$component-bg

#ffffff

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

$component-border

#dee2e6

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

$kendo-button-text

#212529

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

$kendo-button-bg

#e4e7eb

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

$kendo-button-border

#e4e7eb

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

$kendo-fab-shadow

0px 6px 10px rgba(0, 0, 0, 0.14), 0px 1px 18px rgba(0, 0, 0, 0.12), 0px 3px 5px rgba(0, 0, 0, 0.2)

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

$kendo-fab-disabled-shadow

0px 6px 10px rgba(91, 91, 91, 0.1744), 0px 1px 18px rgba(101, 101, 101, 0.1552), 0px 3px 5px rgba(70, 70, 70, 0.232)

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

$kendo-fab-active-shadow

null

Description
The active shadow of the FAB item.

Grid

NameTypeDefault valueComputed value
$grid-bgColor

$component-bg

#ffffff

Description
Background color of the grid component
$grid-textColor

$component-text

#212529

Description
Text color of the grid component
$grid-borderColor

$component-border

#dee2e6

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

$header-bg

#f8f9fa

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

$header-text

#212529

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

$header-border

#dee2e6

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

$header-gradient

null

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

$grid-header-bg

#f8f9fa

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

$grid-header-text

#212529

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

$grid-header-border

#dee2e6

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

rgba( k-contrast-color( $grid-bg ), .04 )

rgba(0, 0, 0, 0.04)

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

null

null

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

null

null

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

rgba( k-contrast-color( $grid-bg ), .08 )

rgba(0, 0, 0, 0.08)

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

null

null

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

null

null

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

rgba( $selected-bg, .25 )

rgba(13, 110, 253, 0.25)

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

$grid-text

#212529

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

$grid-border

#dee2e6

Description
Border color of selected rows in grid

Icons

NameTypeDefault valueComputed value
$icon-font-urlNull

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

Input

NameTypeDefault valueComputed value
$kendo-input-default-widthNumber

100%

100%

Description
Default width of input components.
$kendo-input-border-widthNumber

$input-border-width

1px

Description
Border width of input components.
$kendo-input-border-radiusNull

null

null

Description
Border radius of input components.
$kendo-input-padding-xNumber

$input-padding-x

0.75rem

Description
Horizontal padding of input components.
$kendo-input-padding-yNumber

$input-padding-y

0.375rem

Description
Vertical padding of input components.
$kendo-input-font-familyList

$font-family

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 of input components.
$kendo-input-font-sizeNumber

$font-size

1rem

Description
Font size of input components.
$kendo-input-line-heightNumber

$input-line-height

1.5

Description
Line height of input components.

List

NameTypeDefault valueComputed value
$kendo-list-font-sizeNull

null

null

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

null

null

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

null

null

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

null

null

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

0 0 1px

0 0 1px

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

null

null

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

null

null

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

bold

bold

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

null

null

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

null

null

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

null

null

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

null

null

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

null

null

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

null

null

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

1px 0 0

1px 0 0

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

null

null

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

null

null

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

bold

bold

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

$component-bg

#ffffff

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

$component-text

#212529

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

$component-border

#dee2e6

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

null

null

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

null

null

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

inherit

inherit

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

null

null

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

null

null

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

null

null

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

$hovered-bg

#e9ecef

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

$hovered-text

#212529

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

null

null

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

null

null

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

inset 0 0 0 3px rgba( $kendo-list-text, .15 )

inset 0 0 0 3px rgba(33, 37, 41, 0.15)

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

$selected-bg

#0d6efd

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

$selected-text

white

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

null

null

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

null

null

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

inherit

inherit

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

null

null

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

$subtle-text

#6c757d

Description
Text color of the 'No Data' text.

Menu

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

null

null

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

null

null

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

$popup-border-width

1px

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

$font-size-md

1rem

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

$line-height-md

1.5

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

$popup-bg

#ffffff

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

$popup-text

#212529

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

$popup-border

#dee2e6

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

null

null

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

k-map-get( $spacing, 4 )

1rem

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

k-map-get( $spacing, 1 )

0.25rem

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

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

calc( 2rem + 16px )

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

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

1rem

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

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

calc(-1 * (calc( 2rem + 16px ) - 0.5rem))

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

0px

0px

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

null

null

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

null

null

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

null

null

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

null

null

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

$kendo-list-item-hover-bg

#e9ecef

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

$kendo-list-item-hover-text

#212529

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

null

null

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

null

null

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

$kendo-list-item-selected-bg

#0d6efd

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

$kendo-list-item-selected-text

white

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

null

null

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

null

null

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

$menu-item-focus-shadow

inset 0 0 0 3px rgba(33, 37, 41, 0.15)

Description
The base shadow of focused menu item in popup.

Menu-button

NameTypeDefault valueComputed value
$kendo-menu-button-arrow-padding-xNumber

$kendo-button-padding-y

0.375rem

Description
Horizontal padding of the arrow button.

Radio

NameTypeDefault valueComputed value
$kendo-radio-radiusNumber

50%

50%

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

1px

1px

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

$kendo-checkbox-bg

#ffffff

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

$kendo-checkbox-text

null

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

$kendo-checkbox-border

#ced4da

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

$kendo-checkbox-hover-bg

null

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

$kendo-checkbox-hover-text

null

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

$kendo-checkbox-hover-border

null

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

$kendo-checkbox-checked-bg

#0d6efd

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

$kendo-checkbox-checked-text

white

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

$kendo-checkbox-checked-border

#0d6efd

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

$kendo-checkbox-focus-border

#86b7fe

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

$kendo-checkbox-focus-shadow

0 0 0 0.25rem rgba(13, 110, 253, 0.25)

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

$kendo-checkbox-focus-checked-border

#0d6efd

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

$kendo-checkbox-focus-checked-shadow

0 0 0 0.25rem rgba(13, 110, 253, 0.25)

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

$kendo-checkbox-disabled-bg

null

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

$kendo-checkbox-disabled-text

null

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

$kendo-checkbox-disabled-border

null

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

$kendo-checkbox-disabled-checked-bg

null

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

$kendo-checkbox-disabled-checked-text

null

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

$kendo-checkbox-disabled-checked-border

null

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

$kendo-checkbox-invalid-bg

null

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

$kendo-checkbox-invalid-text

#dc3545

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

$kendo-checkbox-invalid-border

#dc3545

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

image

image

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

"WebComponentsIcons", monospace

"WebComponentsIcons", monospace

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

"\e308"

"\e308"

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

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

url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='white'/%3e%3c/svg%3e")

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

null

null

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

k-map-get( $spacing, 1 )

0.25rem

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

k-map-get( $spacing, 4 )

1rem

Description
Spacing between items of horizontal radio button list.
$kendo-radio-list-item-padding-xNumber

0px

0px

Description
Horizontal padding of radio button list items.
$kendo-radio-list-item-padding-yNumber

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

0.25rem

Description
Vertical padding of radio button list items.
$kendo-radio-ripple-bgColor

$kendo-radio-checked-bg

#0d6efd

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

.25

0.25

Description
Opacity of radio button ripple.

Split-button

NameTypeDefault valueComputed value
$kendo-split-button-focus-shadowList

$kendo-button-focus-shadow

0 0 0 0.25rem rgba(228, 231, 235, 0.5)

Description
Focus shadow of the split button.
$kendo-split-button-arrow-padding-xNumber

$kendo-button-padding-y

0.375rem

Description
Horizontal padding of the arrow button.
$kendo-split-button-arrow-padding-yNumber

$kendo-button-padding-y

0.375rem

Description
Vertical padding of the arrow button.

Switch

NameTypeDefault valueComputed value
$kendo-switch-font-familyNull

null

null

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

1px

1px

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

null

null

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

null

null

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

none

none

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

( sm: ( font-size: null, track-width: 48px, track-height: 26px, thumb-width: 20px, thumb-height: 20px, thumb-offset: 3px, label-offset: null ), md: ( font-size: null, track-width: 56px, track-height: 30px, thumb-width: 24px, thumb-height: 24px, thumb-offset: 3px, label-offset: null ), lg: ( font-size: null, track-width: 64px, track-height: 34px, thumb-width: 28px, thumb-height: 28px, thumb-offset: 3px, label-offset: null ) )

(sm: (font-size: null, track-width: 48px, track-height: 26px, thumb-width: 20px, thumb-height: 20px, thumb-offset: 3px, label-offset: null), md: (font-size: null, track-width: 56px, track-height: 30px, thumb-width: 24px, thumb-height: 24px, thumb-offset: 3px, label-offset: null), lg: (font-size: null, track-width: 64px, track-height: 34px, thumb-width: 28px, thumb-height: 28px, thumb-offset: 3px, label-offset: null))

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

$component-bg

#ffffff

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

null

null

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

$gray-500

#adb5bd

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

null

null

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

null

null

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

null

null

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

null

null

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

null

null

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

null

null

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

null

null

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

k-color-mix( $kendo-switch-off-track-bg, $primary )

#86b7fe

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

null

null

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

.25rem solid rgba( $primary, .25 )

0.25rem solid rgba(13, 110, 253, 0.25)

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

if( $dark-theme, $gray-800, $gray-200 )

#e9ecef

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

null

null

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

null

null

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

null

null

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

$gray-500

#adb5bd

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

null

null

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

null

null

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

null

null

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

null

null

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

null

null

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

null

null

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

null

null

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

$primary

#0d6efd

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

null

null

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

$kendo-switch-on-track-bg

#0d6efd

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

null

null

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

null

null

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

null

null

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

null

null

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

null

null

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

null

null

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

null

null

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

null

null

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

null

null

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

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

0.25rem solid rgba(13, 110, 253, 0.25)

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

k-try-tint( $kendo-switch-on-track-bg, 50% )

#86b7fe

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

null

null

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

null

null

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

null

null

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

k-contrast-color( $kendo-switch-on-track-bg )

white

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

null

null

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

null

null

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

null

null

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

null

null

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

null

null

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

null

null

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

null

null

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

Table

NameTypeDefault valueComputed value
$kendo-table-border-widthNumber

1px

1px

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

$grid-cell-vertical-border-width

1px

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

$grid-cell-horizontal-border-width

0px

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

null

null

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

null

null

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

null

null

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

null

null

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

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

(sm: (font-size: 1rem, line-height: 1.5, cell-padding-x: 0.5rem, cell-padding-y: 0.375rem), md: (font-size: 1rem, line-height: 1.5, cell-padding-x: 0.5rem, cell-padding-y: 0.5rem), lg: (font-size: 1rem, line-height: 1.5, cell-padding-x: 0.5rem, cell-padding-y: 0.625rem))

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

$grid-bg

#ffffff

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

$grid-text

#212529

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

$grid-border

#dee2e6

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

$grid-header-bg

#f8f9fa

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

$grid-header-text

#212529

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

$grid-header-border

#dee2e6

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

$grid-footer-bg

#f8f9fa

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

$grid-footer-text

#212529

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

$grid-footer-border

#dee2e6

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

$kendo-table-header-bg

#f8f9fa

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

$kendo-table-header-text

#212529

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

$kendo-table-header-border

#dee2e6

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

$grid-alt-bg

rgba(0, 0, 0, 0.04)

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

$grid-alt-text

null

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

$grid-alt-border

null

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

$grid-hovered-bg

rgba(0, 0, 0, 0.08)

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

$grid-hovered-text

null

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

$grid-hovered-border

null

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

null

null

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

null

null

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

null

null

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

$grid-focused-shadow

inset 0 0 0 2px rgba(0, 0, 0, 0.08)

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

$grid-selected-bg

rgba(13, 110, 253, 0.25)

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

$grid-selected-text

#212529

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

$grid-selected-border

#dee2e6

Description
Border color of selected rows in table.

Tabstrip

NameTypeDefault valueComputed value
$tabstrip-bgNull

null

null

Description
Background color of tabstrip component
$tabstrip-textColor

$component-text

#212529

Description
Text color of tabstrip component
$tabstrip-borderColor

$component-border

#dee2e6

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

$nav-item-padding-x

1rem

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

$nav-item-padding-y

0.5rem

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

1px

1px

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

k-map-get( $spacing, 1 )

0.25rem

Description
Border radius of tabs
$tabstrip-item-gapNumber

$nav-item-margin

0px

Description
Spacing between tabs
$tabstrip-item-bgNull

null

null

Description
Background color of tabs
$tabstrip-item-textColor

$link-text

#0d6efd

Description
Text color of tabs
$tabstrip-item-borderNull

null

null

Description
Border color of tabs
$tabstrip-item-gradientNull

null

null

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

null

null

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

$link-hover-text

#0a58ca

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

$gray-200

#e9ecef

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

null

null

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

$component-bg

#ffffff

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

$component-text

#212529

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

$component-border

#dee2e6

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

null

null

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

k-map-get( $spacing, 4 )

1rem

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

k-map-get( $spacing, 4 )

1rem

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

$tabstrip-border-width

1px

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

$component-bg

#ffffff

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

$component-text

#212529

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

$component-border

#dee2e6

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

$component-text

#212529

Description
Border color of tabstrip focused content

Toolbar

NameTypeDefault valueComputed value
$toolbar-padding-xNumber

k-map-get( $spacing, 2 )

0.5rem

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

k-map-get( $spacing, 2 )

0.5rem

Description
The vertical padding of the container.

Treeview

NameTypeDefault valueComputed value
$kendo-treeview-font-familyList

$font-family

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 of the treeview component.
$kendo-treeview-font-sizeNumber

$font-size-md

1rem

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

$line-height

1.5

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

16px

16px

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

k-map-get( $spacing, 3 )

0.75rem

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

k-map-get( $spacing, 1 )

0.25rem

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

0px

0px

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

k-map-get( $spacing, 1 )

0.25rem

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

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

(sm: (font-size: 0.875rem, line-height: 1.4285714286, item-padding-x: 0.5rem, item-padding-y: 0.25rem), md: (font-size: 1rem, line-height: 1.5, item-padding-x: 0.75rem, item-padding-y: 0.25rem), lg: (font-size: 1rem, line-height: 1.5, item-padding-x: 0.75rem, item-padding-y: 0.5rem))

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

null

null

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

$component-text

#212529

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

null

null

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

$hovered-bg

#e9ecef

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

$hovered-text

#212529

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

$kendo-treeview-item-hover-bg

#e9ecef

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

null

null

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

$selected-bg

#0d6efd

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

$selected-text

white

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

$kendo-treeview-item-selected-bg

#0d6efd

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

null

null

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

inset 0 0 0 2px rgba( $kendo-treeview-text, .15 )

inset 0 0 0 2px rgba(33, 37, 41, 0.15)

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

transparent

transparent

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

$link-text

#0d6efd

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

null

null

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

transparent

transparent

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

$link-hover-text

#0a58ca

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

null

null

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

transparent

transparent

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

$link-hover-text

#0a58ca

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

null

null

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

$kendo-treeview-item-focus-shadow

inset 0 0 0 2px rgba(33, 37, 41, 0.15)

Description
Box shadow of a focused load more.

Typography

NameTypeDefault valueComputed value
$enable-typographyBool

false

false

Description
Global typography styles for the Kendo Bootstrap theme.
$font-sizeNumber

$font-size-base

1rem

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

$font-family-sans-serif

system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"

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

$font-family-monospace

SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace

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

$line-height-base

1.5

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.