Customizing Spreadsheet

Variables

The following table lists the available variables for customization.

Name	Type	Default value	Computed value
$kendo-spreadsheet-border-width	Number	1px	1px
Description The width of the border around the Spreadsheet.
$kendo-spreadsheet-font-family	String	var( --kendo-font-family, inherit )	var(--kendo-font-family, inherit)
Description The font family of the Spreadsheet.
$kendo-spreadsheet-font-size	String	var( --kendo-font-size, inherit )	var(--kendo-font-size, inherit)
Description The font size of the Spreadsheet.
$kendo-spreadsheet-line-height	String	var( --kendo-line-height, normal )	var(--kendo-line-height, normal)
Description The line height of the Spreadsheet.
$kendo-spreadsheet-bg	String	$kendo-component-bg	var(--kendo-color-surface-alt, #ffffff)
Description The background color of the Spreadsheet.
$kendo-spreadsheet-text	String	$kendo-component-text	var(--kendo-color-on-app-surface, #3d3d3d)
Description The text color of the Spreadsheet.
$kendo-spreadsheet-border	String	$kendo-component-border	var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description The border color of the Spreadsheet.
$kendo-spreadsheet-header-bg	String	$kendo-component-header-bg	var(--kendo-color-surface, #fafafa)
Description The background color of the Spreadsheet header.
$kendo-spreadsheet-header-text	String	$kendo-component-header-text	var(--kendo-color-on-app-surface, #3d3d3d)
Description The text color of the Spreadsheet header.
$kendo-spreadsheet-header-border	String	$kendo-component-header-border	var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description The border color of the Spreadsheet header.
$kendo-spreadsheet-header-gradient	Null	$kendo-component-header-gradient	null
Description The gradient of the Spreadsheet header.
$kendo-spreadsheet-table-header-bg	String	$kendo-spreadsheet-header-bg	var(--kendo-color-surface, #fafafa)
Description The background color of the Spreadsheet table headers.
$kendo-spreadsheet-table-header-text	String	$kendo-spreadsheet-header-text	var(--kendo-color-on-app-surface, #3d3d3d)
Description The text color of the Spreadsheet table headers.
$kendo-spreadsheet-table-header-border	String	$kendo-spreadsheet-header-border	var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description The border color of the Spreadsheet table headers.
$kendo-spreadsheet-table-header-gradient	Null	$kendo-spreadsheet-header-gradient	null
Description The gradient of the Spreadsheet table headers.
$kendo-spreadsheet-action-bar-border-width	Number	1px	1px
Description The border width of the Spreadsheet action bar.
$kendo-spreadsheet-action-bar-padding-y	String	k-spacing(1)	var(--kendo-spacing-1, 0.25rem)
Description The horizontal padding of the Spreadsheet action bar.
$kendo-spreadsheet-action-bar-padding-x	String	k-spacing(2)	var(--kendo-spacing-2, 0.5rem)
Description The vertical padding of the Spreadsheet action bar.
$kendo-spreadsheet-action-bar-font-size	String	$kendo-spreadsheet-font-size	var(--kendo-font-size, inherit)
Description The font size of the Spreadsheet action bar.
$kendo-spreadsheet-action-bar-font-family	List	Arial, Verdana, sans-serif	Arial, Verdana, sans-serif
Description The font family of the Spreadsheet action bar.
$kendo-spreadsheet-action-bar-spacing	String	k-spacing(2)	var(--kendo-spacing-2, 0.5rem)
Description The spacings of the Spreadsheet action bar.
$kendo-spreadsheet-formula-bar-gap	String	k-spacing(2)	var(--kendo-spacing-2, 0.5rem)
Description The gap of the Spreadsheet formula bar.
$kendo-spreadsheet-formula-input-padding-x	String	$kendo-input-padding-x	var(--kendo-spacing-2, 0.5rem)
Description The horizontal padding of the Spreadsheet formula input.
$kendo-spreadsheet-formula-input-padding-y	String	$kendo-input-padding-y	var(--kendo-spacing-1, 0.25rem)
Description The vertical padding of the Spreadsheet formula input.
$kendo-spreadsheet-formula-input-line-height	String	$kendo-input-line-height	var(--kendo-line-height, normal)
Description The line height of the Spreadsheet formula input.
$kendo-spreadsheet-view-font-family	List	Arial, Verdana, sans-serif	Arial, Verdana, sans-serif
Description The font family of the Spreadsheet view.
$kendo-spreadsheet-view-font-size	String	$kendo-spreadsheet-font-size	var(--kendo-font-size, inherit)
Description The font size of the Spreadsheet view.
$kendo-spreadsheet-selection-bg	String	if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25))	color-mix(in srgb, var(--kendo-color-primary, #ff6358) 25%, transparent)
Description The background color of the Spreadsheet selection.
$kendo-spreadsheet-selection-text	Null	null	null
Description The text color of the Spreadsheet selection.
$kendo-spreadsheet-selection-border	String	$kendo-selected-bg	var(--kendo-color-primary, #ff6358)
Description The border color of the Spreadsheet selection.
$kendo-spreadsheet-selection-shadow	List	inset 0 0 0 1px $kendo-selected-bg	inset 0 0 0 1px var(--kendo-color-primary, #ff6358)
Description The shadow of the Spreadsheet selection.
$kendo-spreadsheet-single-selection-bg	String	$kendo-selected-bg	var(--kendo-color-primary, #ff6358)
Description The background color of the Spreadsheet single selection.
$kendo-spreadsheet-single-selection-text	Null	null	null
Description The text color of the Spreadsheet single selection.
$kendo-spreadsheet-single-selection-border	String	$kendo-spreadsheet-bg	var(--kendo-color-surface-alt, #ffffff)
Description The border color of the Spreadsheet single selection.
$kendo-spreadsheet-partial-selection-bg	String	if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25))	color-mix(in srgb, var(--kendo-color-primary, #ff6358) 25%, transparent)
Description The background color of the Spreadsheet partial selection.
$kendo-spreadsheet-active-cell-bg	String	$kendo-spreadsheet-bg	var(--kendo-color-surface-alt, #ffffff)
Description The background color of the Spreadsheet active cell.
$kendo-spreadsheet-active-cell-shadow	List	inset 0 0 0 1px $kendo-selected-bg	inset 0 0 0 1px var(--kendo-color-primary, #ff6358)
Description The shadow of the Spreadsheet active cell.
$kendo-spreadsheet-auto-fill-bg	String	if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25))	color-mix(in srgb, var(--kendo-color-primary, #ff6358) 25%, transparent)
Description The background color of the Spreadsheet auto fill.
$kendo-spreadsheet-auto-fill-text	Null	null	null
Description The text color of the Spreadsheet auto fill.
$kendo-spreadsheet-auto-fill-border	String	$kendo-selected-bg	var(--kendo-color-primary, #ff6358)
Description The border color of the Spreadsheet auto fill.
$kendo-spreadsheet-auto-fill-shadow	List	inset 0 0 0 1px $kendo-selected-bg	inset 0 0 0 1px var(--kendo-color-primary, #ff6358)
Description The shadow of the Spreadsheet auto fill.
$kendo-spreadsheet-auto-fill-punch-bg	String	rgba( $kendo-spreadsheet-bg, .5 )	rgba(var(--kendo-color-surface-alt, #ffffff), 0.5)
Description The background color of the Spreadsheet auto fill punch.
$kendo-spreadsheet-cell-padding-y	String	k-spacing(1)	var(--kendo-spacing-1, 0.25rem)
Description The vertical padding of the Spreadsheet cell.
$kendo-spreadsheet-cell-padding-x	String	$kendo-spreadsheet-cell-padding-y	var(--kendo-spacing-1, 0.25rem)
Description The horizontal padding of the Spreadsheet cell.
$kendo-spreadsheet-cell-editor-line-height	Number	20px	20px
Description The line height of the Spreadsheet cell editor.
$kendo-spreadsheet-cell-editor-padding-x	String	k-spacing(1)	var(--kendo-spacing-1, 0.25rem)
Description The horizontal padding of the Spreadsheet cell editor.
$kendo-spreadsheet-cell-editor-padding-y	String	k-spacing(0)	var(--kendo-spacing-0, 0px)
Description The vertical padding of the Spreadsheet cell editor.
$kendo-spreadsheet-cell-editor-bg	String	$kendo-spreadsheet-bg	var(--kendo-color-surface-alt, #ffffff)
Description The background color of the Spreadsheet cell editor.
$kendo-spreadsheet-cell-editor-text	String	$kendo-spreadsheet-text	var(--kendo-color-on-app-surface, #3d3d3d)
Description The text color of the Spreadsheet cell editor.
$kendo-spreadsheet-cell-editor-border	Null	null	null
Description The border color of the Spreadsheet cell editor.
$kendo-spreadsheet-resize-handle-bg	String	$kendo-color-primary	var(--kendo-color-primary, #ff6358)
Description The background color of the Spreadsheet resize handle.
$kendo-spreadsheet-cell-comment-border	String	$kendo-color-primary	var(--kendo-color-primary, #ff6358)
Description The border color of the Spreadsheet cell comment indicator.
$kendo-spreadsheet-cell-dirty-border	String	$kendo-color-error	var(--kendo-color-error, #f31700)
Description The border color of the Spreadsheet cell dirty indicator.
$kendo-spreadsheet-sheets-bar-padding-x	String	k-spacing(2)	var(--kendo-spacing-2, 0.5rem)
Description The horizontal padding of the Spreadsheet sheets bar.
$kendo-spreadsheet-sheets-bar-padding-y	String	k-spacing(2)	var(--kendo-spacing-2, 0.5rem)
Description The vertical padding of the Spreadsheet sheets bar.
$kendo-spreadsheet-sheets-bar-border-width	Number	1px	1px
Description The border width of the Spreadsheet sheets bar.
$kendo-spreadsheet-insert-image-dialog-border-style	String	dashed	dashed
Description The border style of the Spreadsheet image Dialog.
$kendo-spreadsheet-insert-image-dialog-border-width	Number	2px	2px
Description The border width of the Spreadsheet image Dialog.
$kendo-spreadsheet-insert-image-dialog-text-margin-bottom	String	k-spacing(7.5)	var(--kendo-spacing-7\.5, 1.875rem)
Description The bottom margin of the Spreadsheet image Dialog.
$kendo-spreadsheet-insert-image-dialog-preview-width	Number	355px	355px
Description The width of the Spreadsheet image Dialog preview.
$kendo-spreadsheet-insert-image-dialog-preview-height	Number	230px	230px
Description The height of the Spreadsheet image Dialog preview.
$kendo-spreadsheet-insert-image-dialog-preview-img	String	"image-default.png"	"image-default.png"
Description The image of the Spreadsheet image Dialog preview.
$kendo-spreadsheet-insert-image-dialog-preview-border	String	$kendo-component-border	var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description The border of the Spreadsheet image Dialog preview.
$kendo-spreadsheet-insert-image-dialog-preview-border-radius	String	k-border-radius(md)	var(--kendo-border-radius-md, 0.25rem)
Description The border radius of the Spreadsheet image Dialog preview.
$kendo-spreadsheet-insert-image-dialog-preview-overlay-shadow	List	inset 0 0 0 2000px rgba(0, 0, 0, .5)	inset 0 0 0 2000px rgba(0, 0, 0, 0.5)
Description The shadow of the Spreadsheet image Dialog preview.
$kendo-spreadsheet-insert-image-dialog-preview-overlay-border-radius	String	k-border-radius(md)	var(--kendo-border-radius-md, 0.25rem)
Description The border radius of the Spreadsheet image Dialog preview overlay.
$kendo-spreadsheet-insert-image-dialog-overlay-hover-text	String	$kendo-component-bg	var(--kendo-color-surface-alt, #ffffff)
Description The text color of the hovered Spreadsheet image Dialog preview.
$kendo-spreadsheet-drawing-handle-width	Number	6px	6px
Description The width of the Spreadsheet drawing handle.
$kendo-spreadsheet-drawing-handle-height	Number	6px	6px
Description The height of the Spreadsheet drawing handle.
$kendo-spreadsheet-drawing-handle-border-style	String	solid	solid
Description The border style of the Spreadsheet drawing handle.
$kendo-spreadsheet-drawing-handle-border-width	Number	1px	1px
Description The border width of the Spreadsheet drawing handle.
$kendo-spreadsheet-drawing-handle-outline-color	String	$kendo-color-primary	var(--kendo-color-primary, #ff6358)
Description The border color of the Spreadsheet drawing handle.
$kendo-spreadsheet-drawing-handle-border-color	String	$kendo-selected-bg	var(--kendo-color-primary, #ff6358)
Description The outline color of the Spreadsheet drawing handle.
$kendo-spreadsheet-drawing-handle-bg	String	$kendo-color-primary	var(--kendo-color-primary, #ff6358)
Description The border color of the Spreadsheet drawing handle.
$kendo-spreadsheet-drawing-handle-border-radius	String	k-border-radius(lg)	var(--kendo-border-radius-lg, 0.375rem)
Description The border radius of the Spreadsheet drawing handle.
$kendo-spreadsheet-drawing-outline-style	String	solid	solid
Description The outline style of the Spreadsheet drawing.
$kendo-spreadsheet-drawing-outline-width	Number	2px	2px
Description The outline width of the Spreadsheet drawing.
$kendo-spreadsheet-drawing-anchor-bg	String	if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25))	color-mix(in srgb, var(--kendo-color-primary, #ff6358) 25%, transparent)
Description The background color of the Spreadsheet drawing anchor.
$kendo-spreadsheet-dropzone-spacing-y	String	k-spacing(4)	var(--kendo-spacing-4, 1rem)
Description The vertical spacing of the Spreadsheet DropZone.

Suggested Links

• Styling Overview
• Web Font Icons
• Preview of the Themed Components