All Components

This website hosts native Kendo UI components, built from the ground up with the ultimate performance in mind, intended to be used in the React ecosystem.

Customization

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

Variables

Common

Name Default value Description
$border-radius $border-radius Border radius for all components.
$base-bg try-darken( $component-bg, 3% ) The background of the components' chrome area.
$base-text $component-color The text color of the components' chrome area.
$base-border try-darken( $base-bg, 3% ) The border color of the components' chrome area.
$base-gradient false The gradient background of the components' chrome area.
$hovered-bg try-darken( $base-bg, 3% ) The background of hovered items.
$hovered-text $base-text The text color of hovered items.
$hovered-border try-darken( $base-border, 12% ) The border color of hovered items.
$hovered-gradient false The gradient background of hovered items.
$selected-bg $accent The background of selected items.
$selected-text contrast-wcag( $selected-bg ) The text color of selected items.
$selected-border try-darken( $selected-bg, 12% ) The border color of selected items.
$selected-gradient false The gradient background of selected items.

Buttons

Name Default value Description
$button-bg $secondary The background of the buttons.
$button-text contrast-wcag( $button-bg, $gray-900 ) The text color of the buttons.
$button-border $button-bg The border color of the buttons.
$button-gradient false The background gradient of the buttons.
$button-hovered-bg try-darken( $button-bg, 7.5% ) The background of hovered buttons.
$button-hovered-text contrast-wcag( $button-hovered-bg, $gray-900 ) The text color of hovered buttons.
$button-hovered-border try-darken( $button-border, 10% ) The border color of hovered buttons.
$button-hovered-gradient false The background gradient of hovered buttons.
$button-pressed-bg try-darken( $button-bg, 10% ) The background color of pressed buttons.
$button-pressed-text contrast-wcag( $button-pressed-bg, $gray-900 ) The text color of pressed buttons.
$button-pressed-border try-darken( $button-border, 12.5% ) The border color of pressed buttons.
$button-pressed-gradient false The background gradient of pressed buttons.
$button-focused-shadow 0 0 0 3px rgba($button-border, .5) The shadow of focused buttons.

Charts

Name Default value Description
$series-a #0275d8 The color of the first series.
$series-b #5bc0de The color of the second series.
$series-c #5cb85c The color of the third series.
$series-d #f0ad4e The color of the fourth series.
$series-e #e67d4a The color of the fifth series.
$series-f #d9534f The color of the sixth series.
$chart-major-lines rgba(0, 0, 0, .08) The color of the Chart grid lines (major).
$chart-minor-lines rgba(0, 0, 0, .04) The color of the Chart grid lines (minor).

Color System

Name Default value Description
$accent $primary The color that focuses the user attention.
Used for primary buttons and for elements of primary importance across the theme.
$accent-contrast contrast-wcag( $accent ) The color used along with the accent color denoted by $accent.
Used to provide contrast between the background and foreground colors.
$success $success The color for error messages and states.
$info $info The color for warning messages and states.
$warning $warning The color for success messages and states.
$error $danger The color for informational messages and states.
$color-level-step $theme-color-interval Set a specific jump point for requesting color jumps
$yiq-threshold $yiq-contrasted-threshold The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
$yiq-dark $yiq-text-dark Dark color for use in YIQ color contrast function.
$yiq-light $yiq-text-light Light color for use in YIQ color contrast function.

Fonts

Name Default value Description
$font-size $font-size-base Base font size across all components.
$font-family $font-family-base Font family across all components.
$font-family-monospace $font-family-monospace Font family for monospaced text. Used for styling the code.
$line-height $line-height-base Line height used along with $font-size.

Toolbar

Name Default value Description
$toolbar-padding-x $table-cell-padding / 2 The horizontal padding of the container.
$toolbar-padding-y $table-cell-padding / 2 The vertical padding of the container.

Mixins

In this article