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

Variables

Common

Name Default value Description
$border-radius 2px Border radius for all components.
$accent #ff6358 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.
$info #0058e9 The color for informational messages and states.
$success #37b400 The color for success messages and states.
$warning #ffc000 The color for warning messages and states.
$error #f31700 The color for error messages and states.
$base-text #656565 The text color of the components' chrome area.
$base-bg #f6f6f6 The background of the components' chrome area.
$base-border rgba( black, .08 ) The border color of the components' chrome area.
$base-gradient $base-bg, darken( $base-bg, 2% ) The gradient background of the components' chrome area.
$hovered-text #656565 The text color of hovered items.
$hovered-bg #ededed 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-bg $accent The background of selected items.
$selected-text contrast-wcag( $selected-bg ) The text color of selected items.
$selected-border rgba( black, .1 ) The border color of selected items.
$selected-gradient none The gradient background of selected items.
$grid-alt-bg rgba( contrast-wcag( $panel-bg ), .04) The background of alternating rows.
Set to transparent to remove the row stripes.
@group grid

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 $hovered-text The text color of hovered buttons.
$button-hovered-bg $hovered-bg 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 $button-bg The background color of pressed buttons.
$button-pressed-border $button-border The border color of pressed buttons.
$button-pressed-gradient none The background gradient of pressed buttons.
$button-focused-shadow 0 3px 4px 0 rgba(0, 0, 0, .06) The shadow of focused buttons.

Charts

Name Default value Description
$series-a #ff6358 The color of the first series.
$series-b #ffd246 The color of the second series.
$series-c #78d237 The color of the third series.
$series-d #28b4c8 The color of the fourth series.
$series-e #2d73f5 The color of the fifth series.
$series-f #aa46be 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 inherit Font family across all components.
$font-family-monospace SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace Font family for monospaced text. Used for styling the code.
$line-height (20 / 14) Line height used along with $font-size.

Toolbar

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

Mixins

exports

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

Parameters

  • name : String - The name of the exported module.
In this article