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 Material theme.

Variables

Common

Name Default value Description
$font-family-monospace Consolas, "Ubuntu Mono", "Lucida Console", "Courier New", monospace Font family for monospaced text. Used for styling the code.
$border-radius 2px Border radius for all components.
$primary #3f51b5 The color that focuses the user attention.
Used for primary buttons and for elements of primary importance across the theme.
$primary-contrast #ffffff The color used along with the primary color denoted by $primary.
Used to provide contrast between the background and foreground colors.
$secondary #ff4081 The secondary (accent) color of the theme.
$secondary-contrast #ffffff The color used along with the secondary color denoted by $secondary.
Used to provide contrast between the background and foreground colors.
$base-text rgb(0, 0, 0) The text color of the components' chrome area.
$base-bg #fff The background of the components' chrome area.
$base-gradient $base-bg, darken( $base-bg, 2% ) The gradient background of the components' chrome area.
$hovered-text $base-text The text color of hovered items.
$hovered-bg rgba( black, .07) The background of hovered items.
$hovered-border rgba( black, .15 ) The border color of hovered items.
$hovered-gradient $hovered-bg, darken( $hovered-bg, 2% ) The gradient background of hovered items.
$selected-text $accent-contrast The text color of selected items.
$selected-bg $accent The background of selected items.
$selected-border rgba( black, .1 ) The border color of selected items.
$selected-gradient none The gradient background of selected items.
$error #f31700 The color for error messages and states.
$warning #ffc000 The color for warning messages and states.
$success #37b400 The color for success messages and states.
$info #3f51b5 The color for informational messages and states.

Buttons

Name Default value Description
$button-text $base-text The text color of the buttons.
$button-bg $base-bg The background of the buttons.
$button-border $base-border The border color of the buttons.
$button-gradient $base-gradient The background gradient of the buttons.
$button-hovered-text $button-text The text color of hovered buttons.
$button-hovered-bg mix( $button-text, $button-bg, 12%) The background of hovered buttons.
$button-hovered-border $hovered-border The border color of hovered buttons.
$button-hovered-gradient $hovered-gradient The background gradient of hovered buttons.
$button-pressed-text $button-text The text color of pressed buttons.
$button-pressed-bg mix( $button-text, $button-bg, 12%) The background color of pressed buttons.
$button-pressed-border $button-pressed-bg The border color of pressed buttons.
$button-pressed-gradient none The background gradient of pressed buttons.
$button-focused-shadow $button-shadow The shadow of focused buttons.

Charts

Name Default value Description
$series-a #3f51b5 The color of the first series.
$series-b #2196f3 The clor of the second series.
$series-c #43a047 The color of the third series.
$series-d #ffc107 The color of the fourth series.
$series-e #ff5722 The color of the fifth series.
$series-f #e91e63 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).

Fonts

Name Default value Description
$font-size 14px Base font size across all components.
$font-family Roboto, "Helvetica Neue", sans-serif Font family across all components.
$line-height (28 / 14) Line height used along with $font-size.

Shadows

Name Default value Description
$box-shadow-depth-1 0 2px 1px -1px rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12) Shadow for switch.
Equivalent to material elevation 1.
$box-shadow-depth-2 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12) Shadow for resting state of button, card and other widgets.
Equivalent to material elevation 2.
$box-shadow-depth-3 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12) Shadow for menu, popups and raised state of button and card.
Equivalent to material elevation 8.
$box-shadow-depth-4 0 8px 10px -5px rgba(0, 0, 0, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12) Shadow for drawers and other overlaying elements.
Equivalent to material elevation 16.
$box-shadow-depth-5 0 11px 15px -7px rgba(0, 0, 0, .2), 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12) Shadow for window and dialog.
Equivalent to material elevation 24.

Tabstrip

Name Default value Description
$tabstrip-indicator-color $primary Active tab indicator color. Set to `currentColor` to use the text color
$tabstrip-bg transparent Component background. Set to `transparent` to blend the component with the page.
$tabstrip-color inherit Component text color. Set to `inherit` to blend the component with the page.

Toolbar

Name Default value Description
$toolbar-padding-x 0 The horizontal padding of the container.
$toolbar-padding-y 0 The vertical padding of the container.

Mixins

In this article