feat: prefix variables with $kendo-

BREAKING CHANGE: Prefix variables with `$kendo-` to avoid conflicts with other libraries.

Streamline variable names to use the same naming convention:
* size suffixes are now size infixes.
* add missing medium size

\## Misc variables

| Old name | New name |
| :--- | :--- |
| $dark-theme | $kendo-is-dark-theme |
| $base-bg | $kendo-base-bg |
| $base-text | $kendo-base-text |
| $base-border | $kendo-base-border |
| $base-gradient | $kendo-base-gradient |
| $link-text | $kendo-link-text |
| $link-hover-text | $kendo-link-hover-text |
| $grid-cols | Removed. See @progress/kendo-theme-utils package for alternatives |
| $grid-rows | Removed. See @progress/kendo-theme-utils package for alternatives |
| $grid-gap | Removed. See @progress/kendo-theme-utils package for alternatives |

\## Typography

| Old name | New name |
| :--- | :--- |
| $enable-typography | $kendo-enable-typography |
| $font-family | $kendo-font-family |
| $font-family-monospace | $kendo-font-family-monospace |
| N/A | (new) $kendo-font-family-sans-serif |
| $font-size | $kendo-font-size |
| $font-size-xs | $kendo-font-size-xs |
| $font-size-sm | $kendo-font-size-sm |
| $font-size-md | $kendo-font-size-md |
| $font-size-lg | $kendo-font-size-lg |
| $font-size-xl | $kendo-font-size-xl |
| $line-height | $kendo-line-height |
| $line-height-xs | $kendo-line-height-xs |
| $line-height-sm | $kendo-line-height-sm |
| $line-height-md | $kendo-line-height-md |
| $line-height-lg | $kendo-line-height-lg |
| $line-height-xl | $kendo-line-height-xl |
| $line-height-em | $kendo-line-height-em |
| $font-weight-light | $kendo-font-weight-light |
| $font-weight-normal | $kendo-font-weight-normal |
| N/A | (new) $kendo-font-weight-medium |
| N/A | (new) $kendo-font-weight-semibold |
| $font-weight-bold | $kendo-font-weight-bold |
| $letter-spacing | $kendo-letter-spacing |
| $h1-* | $kendo-h1-* |
| $h2-* | $kendo-h2-* |
| $h3-* | $kendo-h3-* |
| $h4-* | $kendo-h4-* |
| $h5-* | $kendo-h5-* |
| $h6-* | $kendo-h6-* |
| $paragraph-* | $kendo-paragraph-* |
| $code-* | $kendo-code-* |
| $pre-* | $kendo-pre-* |
| $display1-* | $kendo-display1-* |
| $display2-* | $kendo-display2-* |
| $display3-* | $kendo-display3-* |
| $display4-* | $kendo-display4-* |

\## Action buttons

| Old name | New name |
| :--- | :--- |
| $actions-* | $kendo-actions-* |

\## Actionsheet

| Old name | New name |
| :--- | :--- |
| $actionsheet-* | $kendo-actionsheet-* |

\## Adaptive

| Old name | New name |
| :--- | :--- |
| $adaptive-* | $kendo-adaptive-* |

\## Badge

| Old name | New name |
| :--- | :--- |
| $kendo-badge-padding-x-sm | $kendo-badge-sm-padding-x |
| $kendo-badge-padding-y-sm | $kendo-badge-sm-padding-y |
| $kendo-badge-font-size-sm | $kendo-badge-sm-font-size |
| $kendo-badge-line-height-sm | $kendo-badge-sm-line-height |
| $kendo-badge-min-width-sm | $kendo-badge-sm-min-width |
| $kendo-badge-padding-x-md | $kendo-badge-md-padding-x |
| $kendo-badge-padding-y-md | $kendo-badge-md-padding-y |
| $kendo-badge-font-size-md | $kendo-badge-md-font-size |
| $kendo-badge-line-height-md | $kendo-badge-md-line-height |
| $kendo-badge-min-width-md | $kendo-badge-md-min-width |
| $kendo-badge-padding-x-lg | $kendo-badge-lg-padding-x |
| $kendo-badge-padding-y-lg | $kendo-badge-lg-padding-y |
| $kendo-badge-font-size-lg | $kendo-badge-lg-font-size |
| $kendo-badge-line-height-lg | $kendo-badge-lg-line-height |
| $kendo-badge-min-width-lg | $kendo-badge-lg-min-width |

\## Bottom navigation

| Old name | New name |
| :--- | :--- |
| $bottom-nav-* | $kendo-bottom-nav-* |

\## Breadcrumb

| Old name | New name |
| :--- | :--- |
| $breadcrumb-* | $kendo-breadcrumb-* |

\## Button

| Old name | New name |
| :--- | :--- |
| $kendo-button-padding-x-sm | $kendo-button-sm-padding-x |
| $kendo-button-padding-y-sm | $kendo-button-sm-padding-y |
| $kendo-button-font-size-sm | $kendo-button-sm-font-size |
| $kendo-button-line-height-sm | $kendo-button-sm-line-height |
| $kendo-button-calc-size-sm | $kendo-button-sm-calc-size |
| $kendo-button-inner-calc-size-sm | $kendo-button-sm-inner-calc-size |
| $kendo-button-padding-x-md | $kendo-button-md-padding-x |
| $kendo-button-padding-y-md | $kendo-button-md-padding-y |
| $kendo-button-font-size-md | $kendo-button-md-font-size |
| $kendo-button-line-height-md | $kendo-button-md-line-height |
| $kendo-button-calc-size-md | $kendo-button-md-calc-size |
| $kendo-button-inner-calc-size-md | $kendo-button-md-inner-calc-size |
| $kendo-button-padding-x-lg | $kendo-button-lg-padding-x |
| $kendo-button-padding-y-lg | $kendo-button-lg-padding-y |
| $kendo-button-font-size-lg | $kendo-button-lg-font-size |
| $kendo-button-line-height-lg | $kendo-button-lg-line-height |
| $kendo-button-calc-size-lg | $kendo-button-lg-calc-size |
| $kendo-button-inner-calc-size-lg | $kendo-button-lg-inner-calc-size |

\## Calendar

| Old name | New name |
| :--- | :--- |
| $calendar-* | $kendo-calendar-* |

\## Captcha

| Old name | New name |
| :--- | :--- |
| $captcha-* | $kendo-captcha-* |

\## Card

| Old name | New name |
| :--- | :--- |
| $card-* | $kendo-card-* |

\## Chat

| Old name | New name |
| :--- | :--- |
| $chat-* | $kendo-chat-* |

\## Chip

| Old name | New name |
| :--- | :--- |
| $kendo-chip-padding-x-sm | $kendo-chip-sm-padding-x |
| $kendo-chip-padding-y-sm | $kendo-chip-sm-padding-y |
| $kendo-chip-font-size-sm | $kendo-chip-sm-font-size |
| $kendo-chip-line-height-sm | $kendo-chip-sm-line-height |
| $kendo-chip-calc-size-sm | $kendo-chip-sm-calc-size |
| $kendo-chip-padding-x-md | $kendo-chip-md-padding-x |
| $kendo-chip-padding-y-md | $kendo-chip-md-padding-y |
| $kendo-chip-font-size-md | $kendo-chip-md-font-size |
| $kendo-chip-line-height-md | $kendo-chip-md-line-height |
| $kendo-chip-calc-size-md | $kendo-chip-md-calc-size |
| $kendo-chip-padding-x-lg | $kendo-chip-lg-padding-x |
| $kendo-chip-padding-y-lg | $kendo-chip-lg-padding-y |
| $kendo-chip-font-size-lg | $kendo-chip-lg-font-size |
| $kendo-chip-line-height-lg | $kendo-chip-lg-line-height |
| $kendo-chip-calc-size-lg | $kendo-chip-lg-calc-size |

\## Color editor

| Old name | New name |
| :--- | :--- |
| $coloreditor-* | $kendo-color-editor-* |

\## Color gradient

| Old name | New name |
| :--- | :--- |
| $colorgradient-* | $kendo-color-gradient-* |

\## Color palette

| Old name | New name |
| :--- | :--- |
| $colorpalette-* | $kendo-color-palette-* |

\## Color preview

| Old name | New name |
| :--- | :--- |
| $color-preview-* | $kendo-color-preview-* |

\## Dataviz

| Old name | New name |
| :--- | :--- |
| $series-* | $kendo-series-* |
| $chart-* | $kendo-chart-* |
| $treemap-* | $kendo-treemap-* |

\## Date time picker

| Old name | New name |
| :--- | :--- |
| $datetime-* | $kendo-datetime-* |

\## Draggable

| Old name | New name |
| :--- | :--- |
| $drag-clue-* | $kendo-drag-hint-* |
| $drop-hint-* | $kendo-drop-hint-* |

\## Dropdown tree

| Old name | New name |
| :--- | :--- |
| $dropdowntree-* | $kendo-dropdowntree-* |

\## Dropzone

| Old name | New name |
| :--- | :--- |
| $dropzone-* | $kendo-dropzone-* |

\## Expansion panel

| Old name | New name |
| :--- | :--- |
| $expander-* | $kendo-expander-* |

\## Floating action button

| Old name | New name |
| :--- | :--- |
| $kendo-fab-padding-x-sm | $kendo-fab-sm-padding-x |
| $kendo-fab-padding-y-sm | $kendo-fab-sm-padding-y |
| $kendo-fab-padding-x-md | $kendo-fab-md-padding-x |
| $kendo-fab-padding-y-md | $kendo-fab-md-padding-y |
| $kendo-fab-padding-x-lg | $kendo-fab-lg-padding-x |
| $kendo-fab-padding-y-lg | $kendo-fab-lg-padding-y |

\## File manager

| Old name | New name |
| :--- | :--- |
| $filemanager-* | $kendo-file-manager-* |

\## Filter

| Old name | New name |
| :--- | :--- |
| $filter-* | $kendo-filter-* |

\## Floating label

| Old name | New name |
| :--- | :--- |
| $floating-label-* | $kendo-floating-label-* |

\## Form

| Old name | New name |
| :--- | :--- |
| $kendo-form-line-height-sm | $kendo-form-sm-line-height |
| $kendo-form-line-height-lg | $kendo-form-lg-line-height |
| $kendo-form-row-spacing-sm | $kendo-form-sm-row-spacing |
| $kendo-form-row-spacing-md | $kendo-form-md-row-spacing |
| $kendo-form-row-spacing-lg | $kendo-form-lg-row-spacing |

\## Gantt

| Old name | New name |
| :--- | :--- |
| $gantt-* | $kendo-gantt-* |

\## Grid

| Old name | New name |
| :--- | :--- |
| $kendo-grid-padding-x-sm | $kendo-grid-sm-padding-x |
| $kendo-grid-padding-y-sm | $kendo-grid-sm-padding-y |
| $kendo-grid-header-padding-x-sm | $kendo-grid-sm-header-padding-x |
| $kendo-grid-header-padding-y-sm | $kendo-grid-sm-header-padding-y |
| $kendo-grid-group-header-padding-x-sm | $kendo-grid-sm-group-header-padding-x |
| $kendo-grid-group-header-padding-y-sm | $kendo-grid-sm-group-header-padding-y |
| $kendo-grid-cell-padding-x-sm | $kendo-grid-sm-cell-padding-x |
| $kendo-grid-cell-padding-y-sm | $kendo-grid-sm-cell-padding-y |
| $kendo-grid-filter-cell-padding-x-sm | $kendo-grid-sm-filter-cell-padding-x |
| $kendo-grid-filter-cell-padding-y-sm | $kendo-grid-sm-filter-cell-padding-y |
| $kendo-grid-edit-cell-padding-x-sm | $kendo-grid-sm-edit-cell-padding-x |
| $kendo-grid-edit-cell-padding-y-sm | $kendo-grid-sm-edit-cell-padding-y |
| $kendo-grid-group-dropclue-height-sm | $kendo-grid-sm-group-drop-hint-height |
| $kendo-grid-padding-x-md | $kendo-grid-md-padding-x |
| $kendo-grid-padding-y-md | $kendo-grid-md-padding-y |
| $kendo-grid-header-padding-x-md | $kendo-grid-md-header-padding-x |
| $kendo-grid-header-padding-y-md | $kendo-grid-md-header-padding-y |
| $kendo-grid-group-header-padding-x-md | $kendo-grid-md-group-header-padding-x |
| $kendo-grid-group-header-padding-y-md | $kendo-grid-md-group-header-padding-y |
| $kendo-grid-cell-padding-x-md | $kendo-grid-md-cell-padding-x |
| $kendo-grid-cell-padding-y-md | $kendo-grid-md-cell-padding-y |
| $kendo-grid-filter-cell-padding-x-md | $kendo-grid-md-filter-cell-padding-x |
| $kendo-grid-filter-cell-padding-y-md | $kendo-grid-md-filter-cell-padding-y |
| $kendo-grid-edit-cell-padding-x-md | $kendo-grid-md-edit-cell-padding-x |
| $kendo-grid-edit-cell-padding-y-md | $kendo-grid-md-edit-cell-padding-y |
| $kendo-grid-group-dropclue-height-md | $kendo-grid-md-group-drop-hint-height |
| $kendo-grid-padding-x-lg | $kendo-grid-lg-padding-x |
| $kendo-grid-padding-y-lg | $kendo-grid-lg-padding-y |
| $kendo-grid-header-padding-x-lg | $kendo-grid-lg-header-padding-x |
| $kendo-grid-header-padding-y-lg | $kendo-grid-lg-header-padding-y |
| $kendo-grid-group-header-padding-x-lg | $kendo-grid-lg-group-header-padding-x |
| $kendo-grid-group-header-padding-y-lg | $kendo-grid-lg-group-header-padding-y |
| $kendo-grid-cell-padding-x-lg | $kendo-grid-lg-cell-padding-x |
| $kendo-grid-cell-padding-y-lg | $kendo-grid-lg-cell-padding-y |
| $kendo-grid-filter-cell-padding-x-lg | $kendo-grid-lg-filter-cell-padding-x |
| $kendo-grid-filter-cell-padding-y-lg | $kendo-grid-lg-filter-cell-padding-y |
| $kendo-grid-edit-cell-padding-x-lg | $kendo-grid-lg-edit-cell-padding-x |
| $kendo-grid-edit-cell-padding-y-lg | $kendo-grid-lg-edit-cell-padding-y |
| $kendo-grid-group-dropclue-height-lg | $kendo-grid-lg-group-drop-hint-height |

\## Image Editor

| Old name | New name |
| :--- | :--- |
| $imageeditor-* | $kendo-image-editor-* |

\## Input

| Old name | New name |
| :--- | :--- |
| $kendo-input-padding-x-sm | $kendo-input-sm-padding-x |
| $kendo-input-padding-y-sm | $kendo-input-sm-padding-y |
| $kendo-input-font-size-sm | $kendo-input-sm-font-size |
| $kendo-input-line-height-sm | $kendo-input-sm-line-height |
| $kendo-input-padding-x-md | $kendo-input-md-padding-x |
| $kendo-input-padding-y-md | $kendo-input-md-padding-y |
| $kendo-input-font-size-md | $kendo-input-md-font-size |
| $kendo-input-line-height-md | $kendo-input-md-line-height |
| $kendo-input-padding-x-lg | $kendo-input-lg-padding-x |
| $kendo-input-padding-y-lg | $kendo-input-lg-padding-y |
| $kendo-input-font-size-lg | $kendo-input-lg-font-size |
| $kendo-input-line-height-lg | $kendo-input-lg-line-height |

\## List

| Old name | New name |
| :--- | :--- |
| $kendo-list-font-size-sm | $kendo-list-sm-font-size |
| $kendo-list-line-height-sm | $kendo-list-sm-line-height |
| $kendo-list-header-padding-x-sm | $kendo-list-sm-header-padding-x |
| $kendo-list-header-padding-y-sm | $kendo-list-sm-header-padding-y |
| $kendo-list-header-font-size-sm | $kendo-list-sm-header-font-size |
| $kendo-list-header-line-height-sm | $kendo-list-sm-header-line-height |
| $kendo-list-item-padding-x-sm | $kendo-list-sm-item-padding-x |
| $kendo-list-item-padding-y-sm | $kendo-list-sm-item-padding-y |
| $kendo-list-item-font-size-sm | $kendo-list-sm-item-font-size |
| $kendo-list-item-line-height-sm | $kendo-list-sm-item-line-height |
| $kendo-list-group-item-padding-x-sm | $kendo-list-sm-group-item-padding-x |
| $kendo-list-group-item-padding-y-sm | $kendo-list-sm-group-item-padding-y |
| $kendo-list-group-item-font-size-sm | $kendo-list-sm-group-item-font-size |
| $kendo-list-group-item-line-height-sm | $kendo-list-sm-group-item-line-height |
| $kendo-list-font-size-md | $kendo-list-md-font-size |
| $kendo-list-line-height-md | $kendo-list-md-line-height |
| $kendo-list-header-padding-x-md | $kendo-list-md-header-padding-x |
| $kendo-list-header-padding-y-md | $kendo-list-md-header-padding-y |
| $kendo-list-header-font-size-md | $kendo-list-md-header-font-size |
| $kendo-list-header-line-height-md | $kendo-list-md-header-line-height |
| $kendo-list-item-padding-x-md | $kendo-list-md-item-padding-x |
| $kendo-list-item-padding-y-md | $kendo-list-md-item-padding-y |
| $kendo-list-item-font-size-md | $kendo-list-md-item-font-size |
| $kendo-list-item-line-height-md | $kendo-list-md-item-line-height |
| $kendo-list-group-item-padding-x-md | $kendo-list-md-group-item-padding-x |
| $kendo-list-group-item-padding-y-md | $kendo-list-md-group-item-padding-y |
| $kendo-list-group-item-font-size-md | $kendo-list-md-group-item-font-size |
| $kendo-list-group-item-line-height-md | $kendo-list-md-group-item-line-height |
| $kendo-list-font-size-lg | $kendo-list-lg-font-size |
| $kendo-list-line-height-lg | $kendo-list-lg-line-height |
| $kendo-list-header-padding-x-lg | $kendo-list-lg-header-padding-x |
| $kendo-list-header-padding-y-lg | $kendo-list-lg-header-padding-y |
| $kendo-list-header-font-size-lg | $kendo-list-lg-header-font-size |
| $kendo-list-header-line-height-lg | $kendo-list-lg-header-line-height |
| $kendo-list-item-padding-x-lg | $kendo-list-lg-item-padding-x |
| $kendo-list-item-padding-y-lg | $kendo-list-lg-item-padding-y |
| $kendo-list-item-font-size-lg | $kendo-list-lg-item-font-size |
| $kendo-list-item-line-height-lg | $kendo-list-lg-item-line-height |
| $kendo-list-group-item-padding-x-lg | $kendo-list-lg-group-item-padding-x |
| $kendo-list-group-item-padding-y-lg | $kendo-list-lg-group-item-padding-y |
| $kendo-list-group-item-font-size-lg | $kendo-list-lg-group-item-font-size |
| $kendo-list-group-item-line-height-lg | $kendo-list-lg-group-item-line-height |

\## Listgroup

| Old name | New name |
| :--- | :--- |
| $listgroup-* | $kendo-listgroup-* |

\## Loader

| Old name | New name |
| :--- | :--- |
| $kendo-loader-segment-size-sm | $kendo-loader-sm-segment-size |
| $kendo-loader-padding-sm | $kendo-loader-sm-padding |
| $kendo-loader-spinner-3-width-sm | $kendo-loader-sm-spinner-3-width |
| $kendo-loader-spinner-3-height-sm | $kendo-loader-sm-spinner-3-height |
| $kendo-loader-spinner-4-width-sm | $kendo-loader-sm-spinner-4-width |
| $kendo-loader-spinner-4-height-sm | $kendo-loader-sm-spinner-4-height |
| $kendo-loader-container-padding-sm | $kendo-loader-sm-container-padding |
| $kendo-loader-container-gap-sm | $kendo-loader-sm-container-gap |
| $kendo-loader-container-font-size-sm | $kendo-loader-sm-container-font-size |
| $kendo-loader-segment-size-md | $kendo-loader-md-segment-size |
| $kendo-loader-padding-md | $kendo-loader-md-padding |
| $kendo-loader-spinner-3-width-md | $kendo-loader-md-spinner-3-width |
| $kendo-loader-spinner-3-height-md | $kendo-loader-md-spinner-3-height |
| $kendo-loader-spinner-4-width-md | $kendo-loader-md-spinner-4-width |
| $kendo-loader-spinner-4-height-md | $kendo-loader-md-spinner-4-height |
| $kendo-loader-container-padding-md | $kendo-loader-md-container-padding |
| $kendo-loader-container-gap-md | $kendo-loader-md-container-gap |
| $kendo-loader-container-font-size-md | $kendo-loader-md-container-font-size |
| $kendo-loader-segment-size-lg | $kendo-loader-lg-segment-size |
| $kendo-loader-padding-lg | $kendo-loader-lg-padding |
| $kendo-loader-spinner-3-width-lg | $kendo-loader-lg-spinner-3-width |
| $kendo-loader-spinner-3-height-lg | $kendo-loader-lg-spinner-3-height |
| $kendo-loader-spinner-4-width-lg | $kendo-loader-lg-spinner-4-width |
| $kendo-loader-spinner-4-height-lg | $kendo-loader-lg-spinner-4-height |
| $kendo-loader-container-padding-lg | $kendo-loader-lg-container-padding |
| $kendo-loader-container-gap-lg | $kendo-loader-lg-container-gap |
| $kendo-loader-container-font-size-lg | $kendo-loader-lg-container-font-size |

\## Map

| Old name | New name |
| :--- | :--- |
| $map-* | $kendo-map-* |

\## Media player

| Old name | New name |
| :--- | :--- |
| $mediaplayer-* | $kendo-media-player-* |

\## Menu

| Old name | New name |
| :--- | :--- |
| $menu-* | $kendo-menu-* |
| $kendo-menu-popup-font-size-sm | $kendo-menu-sm-popup-font-size |
| $kendo-menu-popup-line-height-sm | $kendo-menu-sm-popup-line-height |
| $kendo-menu-popup-item-padding-x-sm | $kendo-menu-sm-popup-item-padding-x |
| $kendo-menu-popup-item-padding-y-sm | $kendo-menu-sm-popup-item-padding-y |
| $kendo-menu-popup-item-padding-end-sm | $kendo-menu-sm-popup-item-padding-end |
| $kendo-menu-popup-item-icon-margin-start-sm | $kendo-menu-sm-popup-item-icon-margin-start |
| $kendo-menu-popup-item-icon-margin-end-sm | $kendo-menu-sm-popup-item-icon-margin-end |
| $kendo-menu-popup-font-size-md | $kendo-menu-md-popup-font-size |
| $kendo-menu-popup-line-height-md | $kendo-menu-md-popup-line-height |
| $kendo-menu-popup-item-padding-x-md | $kendo-menu-md-popup-item-padding-x |
| $kendo-menu-popup-item-padding-y-md | $kendo-menu-md-popup-item-padding-y |
| $kendo-menu-popup-item-padding-end-md | $kendo-menu-md-popup-item-padding-end |
| $kendo-menu-popup-item-icon-margin-start-md | $kendo-menu-md-popup-item-icon-margin-start |
| $kendo-menu-popup-item-icon-margin-end-md | $kendo-menu-md-popup-item-icon-margin-end |
| $kendo-menu-popup-font-size-lg | $kendo-menu-lg-popup-font-size |
| $kendo-menu-popup-line-height-lg | $kendo-menu-lg-popup-line-height |
| $kendo-menu-popup-item-padding-x-lg | $kendo-menu-lg-popup-item-padding-x |
| $kendo-menu-popup-item-padding-y-lg | $kendo-menu-lg-popup-item-padding-y |
| $kendo-menu-popup-item-padding-end-lg | $kendo-menu-lg-popup-item-padding-end |
| $kendo-menu-popup-item-icon-margin-start-lg | $kendo-menu-lg-popup-item-icon-margin-start |
| $kendo-menu-popup-item-icon-margin-end-lg | $kendo-menu-lg-popup-item-icon-margin-end |

\## Message box

| Old name | New name |
| :--- | :--- |
| $message-box-* | $kendo-message-box-* |

\## Orgchart

| Old name | New name |
| :--- | :--- |
| $orgchart-* | $kendo-orgchart-* |

\## Overlay

| Old name | New name |
| :--- | :--- |
| $overlay-* | $kendo-overlay-* |

\## Pager

| Old name | New name |
| :--- | :--- |
| $kendo-pager-padding-x-sm | $kendo-pager-sm-padding-x |
| $kendo-pager-padding-y-sm | $kendo-pager-sm-padding-y |
| $kendo-pager-item-min-width-sm | $kendo-pager-sm-item-min-width |
| $kendo-pager-item-group-spacing-sm | $kendo-pager-sm-item-group-spacing |
| $kendo-pager-dropdown-width-sm | $kendo-pager-sm-dropdown-width |
| $kendo-pager-padding-x-md | $kendo-pager-md-padding-x |
| $kendo-pager-padding-y-md | $kendo-pager-md-padding-y |
| $kendo-pager-item-min-width-md | $kendo-pager-md-item-min-width |
| $kendo-pager-item-group-spacing-md | $kendo-pager-md-item-group-spacing |
| $kendo-pager-dropdown-width-md | $kendo-pager-md-dropdown-width |
| $kendo-pager-padding-x-lg | $kendo-pager-lg-padding-x |
| $kendo-pager-padding-y-lg | $kendo-pager-lg-padding-y |
| $kendo-pager-item-min-width-lg | $kendo-pager-lg-item-min-width |
| $kendo-pager-item-group-spacing-lg | $kendo-pager-lg-item-group-spacing |
| $kendo-pager-dropdown-width-lg | $kendo-pager-lg-dropdown-width |

\## Panelbar

| Old name | New name |
| :--- | :--- |
| $panelbar-* | $kendo-panelbar-* |

\## PDF viewer

| Old name | New name |
| :--- | :--- |
| $pdf-viewer-* | $kendo-pdf-viewer-* |

\## Pivotgrid

| Old name | New name |
| :--- | :--- |
| $pivotgrid-* | $kendo-pivotgrid-* |

\## Popup

| Old name | New name |
| :--- | :--- |
| $popup-* | $kendo-popup-* |

\## Rating

| Old name | New name |
| :--- | :--- |
| $rating-* | $kendo-rating-* |

\## Scheduler

| Old name | New name |
| :--- | :--- |
| $scheduler-* | $kendo-scheduler-* |

\## Scrollview

| Old name | New name |
| :--- | :--- |
| $scrollview-* | $kendo-scrollview-* |

\## Signature

| Old name | New name |
| :--- | :--- |
| $kendo-signature-padding-x-sm | $kendo-signature-sm-padding-x |
| $kendo-signature-padding-y-sm | $kendo-signature-sm-padding-y |
| $kendo-signature-line-height-sm | $kendo-signature-sm-line-height |
| $kendo-signature-padding-x-md | $kendo-signature-md-padding-x |
| $kendo-signature-padding-y-md | $kendo-signature-md-padding-y |
| $kendo-signature-line-height-md | $kendo-signature-md-line-height |
| $kendo-signature-padding-x-lg | $kendo-signature-lg-padding-x |
| $kendo-signature-padding-y-lg | $kendo-signature-lg-padding-y |
| $kendo-signature-line-height-lg | $kendo-signature-lg-line-height |

\## Skeleton

| Old name | New name |
| :--- | :--- |
| $skeleton-* | $kendo-skeleton-* |

\## Slider

| Old name | New name |
| :--- | :--- |
| $slider-* | $kendo-slider-* |

\## Split button

| Old name | New name |
| :--- | :--- |
| $kendo-split-button-arrow-padding-x-sm | $kendo-split-button-sm-arrow-padding-x |
| $kendo-split-button-arrow-padding-y-sm | $kendo-split-button-sm-arrow-padding-y |
| $kendo-split-button-arrow-padding-x-md | $kendo-split-button-md-arrow-padding-x |
| $kendo-split-button-arrow-padding-y-md | $kendo-split-button-md-arrow-padding-y |
| $kendo-split-button-arrow-padding-x-lg | $kendo-split-button-lg-arrow-padding-x |
| $kendo-split-button-arrow-padding-y-lg | $kendo-split-button-lg-arrow-padding-y |

\## Splitter

| Old name | New name |
| :--- | :--- |
| $splitter-* | $kendo-splitter-* |
| $splitbar-* | $kendo-splitbar-* |

\## Spreadsheet

| Old name | New name |
| :--- | :--- |
| $spreadsheet-* | $kendo-spreadsheet-* |

\## Stepper

| Old name | New name |
| :--- | :--- |
| $stepper-* | $kendo-stepper-* |

\## Table

| Old name | New name |
| :--- | :--- |
| $kendo-table-cell-padding-x-sm | $kendo-table-sm-cell-padding-x |
| $kendo-table-cell-padding-y-sm | $kendo-table-sm-cell-padding-y |
| $kendo-table-cell-padding-x-md | $kendo-table-md-cell-padding-x |
| $kendo-table-cell-padding-y-md | $kendo-table-md-cell-padding-y |
| $kendo-table-cell-padding-x-lg | $kendo-table-lg-cell-padding-x |
| $kendo-table-cell-padding-y-lg | $kendo-table-lg-cell-padding-y |

\## Tabstrip

| Old name | New name |
| :--- | :--- |
| $tabstrip-* | $kendo-tabstrip-* |

\## Taskboard

| Old name | New name |
| :--- | :--- |
| $taskboard-* | $kendo-taskboard-* |

\## Tile layout

| Old name | New name |
| :--- | :--- |
| $tilelayout-* | $kendo-tile-layout-* |

\## Timeline

| Old name | New name |
| :--- | :--- |
| $timeline-* | $kendo-timeline-* |

\## Time selector

| Old name | New name |
| :--- | :--- |
| $time-selector-* | $kendo-time-selector-* |

\## Toolbar

| Old name | New name |
| :--- | :--- |
| $kendo-toolbar-padding-x-sm | $kendo-toolbar-sm-padding-x |
| $kendo-toolbar-padding-y-sm | $kendo-toolbar-sm-padding-y |
| $kendo-toolbar-spacing-sm | $kendo-toolbar-sm-spacing |
| $kendo-toolbar-padding-x-md | $kendo-toolbar-md-padding-x |
| $kendo-toolbar-padding-y-md | $kendo-toolbar-md-padding-y |
| $kendo-toolbar-spacing-md | $kendo-toolbar-md-spacing |
| $kendo-toolbar-padding-x-lg | $kendo-toolbar-lg-padding-x |
| $kendo-toolbar-padding-y-lg | $kendo-toolbar-lg-padding-y |
| $kendo-toolbar-spacing-lg | $kendo-toolbar-lg-spacing |

\## Tooltip

| Old name | New name |
| :--- | :--- |
| $tooltip-* | $kendo-tooltip-* |

\## Treeview

| Old name | New name |
| :--- | :--- |
| $kendo-treeview-font-size-sm | $kendo-treeview-sm-font-size |
| $kendo-treeview-line-height-sm | $kendo-treeview-sm-line-height |
| $kendo-treeview-item-padding-x-sm | $kendo-treeview-sm-item-padding-x |
| $kendo-treeview-item-padding-y-sm | $kendo-treeview-sm-item-padding-y |
| $kendo-treeview-font-size-md | $kendo-treeview-md-font-size |
| $kendo-treeview-line-height-md | $kendo-treeview-md-line-height |
| $kendo-treeview-item-padding-x-md | $kendo-treeview-md-item-padding-x |
| $kendo-treeview-item-padding-y-md | $kendo-treeview-md-item-padding-y |
| $kendo-treeview-font-size-lg | $kendo-treeview-lg-font-size |
| $kendo-treeview-line-height-lg | $kendo-treeview-lg-line-height |
| $kendo-treeview-item-padding-x-lg | $kendo-treeview-lg-item-padding-x |
| $kendo-treeview-item-padding-y-lg | $kendo-treeview-lg-item-padding-y |

\## Wizard

| Old name | New name |
| :--- | :--- |
| $wizard-* | $kendo-wizard-* |

packages/bootstrap/scss/_bootstrap-overrides.scss

@@ -1,8 +1,5 @@
-$dark-theme: false !default;
+$kendo-is-dark-theme: false !default;
 
-$font-size-base: 1rem !default;
-
-// stylelint-disable scss/dollar-variable-colon-space-after
 $gray-100: #f8f9fa !default;
 $gray-200: #e9ecef !default;
 $gray-300: #dee2e6 !default;
@@ -12,7 +9,6 @@ $gray-600: #6c757d !default;
 $gray-700: #495057 !default;
 $gray-800: #343a40 !default;
 $gray-900: #212529 !default;
-// stylelint-enable scss/dollar-variable-colon-space-after
 
 $kendo-body-bg: $kendo-color-white !default;
 
@@ -24,18 +20,3 @@ $input-bg: $kendo-component-bg !default;
 $input-color: k-contrast-color( $input-bg, $gray-700, $gray-300 ) !default;
 $input-border-color: if( k-is-light( $input-bg ), $gray-400, $gray-600 ) !default;
 $input-placeholder-color: k-contrast-color( $input-bg, $gray-600, $gray-400 ) !default;
-
-$card-bg: $kendo-component-bg !default;
-$card-color: $kendo-component-text !default;
-$card-border-color: $kendo-component-border !default;
-
-$breadcrumb-padding-x: 0px !default;
-$breadcrumb-padding-y: 0px !default;
-$breadcrumb-bg: $kendo-component-bg !default;
-
-$table-bg: $kendo-component-bg !default;
-$table-color: $kendo-component-text !default;
-$table-border-color: $kendo-component-border !default;
-
-$tooltip-bg: if( $dark-theme, $kendo-color-white, $kendo-color-black ) !default;
-$tooltip-color: k-contrast-color( $tooltip-bg ) !default;

packages/bootstrap/scss/_variables.scss

@@ -10,6 +10,7 @@ $kendo-enable-shadows: true !default;
 $kendo-enable-gradients: true !default;
 $kendo-enable-transitions: true !default;
 $kendo-enable-focus-contrast: false !default;
+$kendo-enable-typography: false !default;
 
 $kendo-use-input-button-width: false !default;
 $kendo-use-input-spinner-width: false !default;
@@ -55,8 +56,6 @@ $kendo-spacing: (
     24: 6rem
 ) !default;
 
-$default-scrollbar-width: 17px !default;
-
 
 // Icons
 $kendo-icon-size: 16px !default;
@@ -84,9 +83,9 @@ $kendo-padding-lg-y: k-map-get( $kendo-spacing, 3 ) !default;
 
 /// Border radius for all components.
 $kendo-border-radius: $border-radius !default;
-$kendo-border-radius-sm: k-math-div( $kendo-border-radius, 2 ) !default;
+$kendo-border-radius-sm: $border-radius-sm !default;
 $kendo-border-radius-md: $kendo-border-radius !default;
-$kendo-border-radius-lg: $kendo-border-radius * 1.5 !default;
+$kendo-border-radius-lg: $border-radius-lg !default;
 
 $kendo-border-radii: (
     DEFAULT: $kendo-border-radius-md,
@@ -104,7 +103,7 @@ $kendo-zindex-loading: 100 !default;
 
 
 // Color settings
-$dark-theme: false !default;
+$kendo-is-dark-theme: false !default;
 
 // Theme colors
 /// The color that focuses the user attention.
@@ -187,7 +186,7 @@ $kendo-color-light: $light !default;
 
 /// Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark
 /// @group color-system
-$kendo-color-inverse: if( $dark-theme, $kendo-color-light, $kendo-color-dark ) !default;
+$kendo-color-inverse: if( $kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark ) !default;
 
 
 $kendo-theme-colors: (
@@ -208,57 +207,69 @@ $kendo-theme-colors: (
 
 /// Base font size across all components.
 /// @group typography
-$font-size: $font-size-base !default;
-$font-size-xs: ( $font-size * .75 ) !default;
-$font-size-sm: $font-size-sm !default;
-$font-size-md: $font-size !default;
-$font-size-lg: $font-size-lg !default;
-$font-size-xl: ( $font-size-md * 1.5 ) !default;
+$kendo-font-size: $font-size-base !default;
+$kendo-font-size-xs: ( $kendo-font-size * .75 ) !default;
+$kendo-font-size-sm: $font-size-sm !default;
+$kendo-font-size-md: $kendo-font-size !default;
+$kendo-font-size-lg: $font-size-lg !default;
+$kendo-font-size-xl: ( $kendo-font-size-md * 1.5 ) !default;
 
 $kendo-font-sizes: (
-    xs: $font-size-xs,
-    sm: $font-size-sm,
-    md: $font-size-md,
-    lg: $font-size-lg,
-    xl: $font-size-xl
+    xs: $kendo-font-size-xs,
+    sm: $kendo-font-size-sm,
+    md: $kendo-font-size-md,
+    lg: $kendo-font-size-lg,
+    xl: $kendo-font-size-xl
 ) !default;
 
-/// Font family across all components.
+/// Font family for text.
 /// @group typography
-$font-family: $font-family-sans-serif !default;
+$kendo-font-family-sans-serif: $font-family-sans-serif !default;
 
 /// Font family for monospaced text. Used for styling the code.
 /// @group typography
-$font-family-monospace: $font-family-monospace !default;
+$kendo-font-family-monospace: $font-family-monospace !default;
+
+/// Font family across all components.
+/// @group typography
+$kendo-font-family: $kendo-font-family-sans-serif !default;
 
-/// Line height used along with $font-size.
+/// Line height used along with $kendo-font-size.
 /// @group typography
-$line-height: $line-height-base !default;
-$line-height-xs: 1 !default;
-$line-height-sm: $line-height-sm !default;
-$line-height-md: $line-height !default;
-$line-height-lg: $line-height-lg !default;
-$line-height-em: calc( #{$line-height} * 1em ) !default;
+$kendo-line-height: $line-height-base !default;
+$kendo-line-height-xs: 1 !default;
+$kendo-line-height-sm: $line-height-sm !default;
+$kendo-line-height-md: $kendo-line-height !default;
+$kendo-line-height-lg: $line-height-lg !default;
+$kendo-line-height-em: calc( #{$kendo-line-height} * 1em ) !default;
 
 // Font weight
-$font-weight-light: $font-weight-light !default;
-$font-weight-normal: $font-weight-normal !default;
-$font-weight-bold: $font-weight-bold !default;
+$kendo-font-weight-light: $font-weight-light !default;
+$kendo-font-weight-normal: $font-weight-normal !default;
+$kendo-font-weight-medium: 500 !default; // TODO: use from bootstrap when we update
+$kendo-font-weight-semibold: 600 !default; // TODO: use from bootstrap when we update
+$kendo-font-weight-bold: $font-weight-bold !default;
 
 // Letter Spacing
-$letter-spacing: null !default;
+$kendo-letter-spacing: null !default;
 
 
+// Generic styles
+
 // Root styles
 $kendo-body-bg: $kendo-color-white !default;
 $kendo-body-text: k-contrast-color( $kendo-body-bg, $gray-900, $gray-100 ) !default;
 
-$kendo-subtle-text: if( $dark-theme, $gray-400, $text-muted ) !default;
+$kendo-subtle-text: if( $kendo-is-dark-theme, $gray-400, $text-muted ) !default;
 
 $kendo-app-bg: k-try-shade( $kendo-body-bg, .25 ) !default;
 $kendo-app-text: $kendo-body-text !default;
 $kendo-app-border: if( k-is-light( $kendo-app-bg ), $gray-300, $gray-700 ) !default;
 
+// Link
+$kendo-link-text: $link-color !default;
+$kendo-link-hover-text: $link-hover-color !default;
+
 
 // Components
 
@@ -278,18 +289,18 @@ $kendo-component-border: if( k-is-light( $kendo-component-bg ), $gray-300, $gray
 
 
 /// The background of the components' chrome area.
-$base-bg: $gray-100 !default;
+$kendo-base-bg: $gray-100 !default;
 /// The text color of the components' chrome area.
-$base-text: $kendo-body-text !default;
+$kendo-base-text: $kendo-body-text !default;
 /// The border color of the components' chrome area.
-$base-border: k-try-shade( $base-bg, 1 ) !default;
+$kendo-base-border: k-try-shade( $kendo-base-bg, 1 ) !default;
 /// The gradient background of the components' chrome area.
-$base-gradient: null !default;
+$kendo-base-gradient: null !default;
 
 /// The background of hovered items.
 $kendo-hover-bg: $gray-200 !default;
 /// The text color of hovered items.
-$kendo-hover-text: $base-text !default;
+$kendo-hover-text: $kendo-base-text !default;
 /// The border color of hovered items.
 $kendo-hover-border: k-try-shade( $kendo-hover-bg, 1 ) !default;
 /// The gradient background of hovered items.
@@ -306,7 +317,7 @@ $kendo-selected-gradient: null !default;
 
 $kendo-selected-hover-bg: k-try-shade( $kendo-selected-bg, .5 ) !default;
 $kendo-selected-hover-text: $kendo-selected-text !default;
-$kendo-selected-hover-border: $base-border !default;
+$kendo-selected-hover-border: $kendo-base-border !default;
 $kendo-selected-hover-gradient: null !default;
 
 
@@ -317,7 +328,7 @@ $kendo-transition: color .2s ease-in-out, background-color .2s ease-in-out, bord
 
 
 // Disabled mixin variables
-$kendo-disabled-text: if( $dark-theme, $gray-600, $gray-500) !default;
+$kendo-disabled-text: if( $kendo-is-dark-theme, $gray-600, $gray-500) !default;
 $kendo-disabled-filter: grayscale(.1) !default;
 $kendo-disabled-opacity: .65 !default;
 
@@ -333,7 +344,7 @@ $kendo-disabled-styling: (
 
 
 // Header
-$kendo-component-header-bg: $base-bg !default;
+$kendo-component-header-bg: $kendo-base-bg !default;
 $kendo-component-header-text: $kendo-component-text !default;
 $kendo-component-header-border: $kendo-component-border !default;
 $kendo-component-header-gradient: null !default;
@@ -344,9 +355,3 @@ $kendo-invalid-bg: null !default;
 $kendo-invalid-text: $kendo-color-error !default;
 $kendo-invalid-border: $kendo-color-error !default;
 $kendo-invalid-shadow: 0 0 0 .25rem rgba( $kendo-invalid-border, .25 ) !default;
-
-
-// Layout
-$grid-cols: 12 !default;
-$grid-rows: 10 !default;
-$grid-gap: 10px !default;

packages/bootstrap/scss/action-buttons/_variables.scss

@@ -1,11 +1,11 @@
 // Actions
-$actions-margin-top: k-map-get( $kendo-spacing, 4 ) !default;
-$actions-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
-$actions-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
-$actions-border-width: 0px !default;
-$actions-button-spacing: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-actions-margin-top: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-actions-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-actions-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-actions-border-width: 0px !default;
+$kendo-actions-button-spacing: k-map-get( $kendo-spacing, 2 ) !default;
 
-$actions-bg: null !default;
-$actions-text: null !default;
-$actions-border: null !default;
-$actions-gradient: null !default;
+$kendo-actions-bg: null !default;
+$kendo-actions-text: null !default;
+$kendo-actions-border: null !default;
+$kendo-actions-gradient: null !default;