Migrating to the new v8.0.0 Color System
Telerik and Kendo UI Bootstrap theme v8.0.0 introduces a new Color System based on a Sass map that contains all color tokens used in the theme as key-value pairs.
To see the full migration guide that lets you move theme customizations applied to theme versions before v8.0.0 to theme v8.0.0, visit Breaking Changes V8.0.0
The table below shows the mapping between the Sass variables of the Telerik and Kendo UI Bootstrap theme used prior to v8.0.0 and the new Sass map (used in v8.0.0 and later). It contains all color tokens used in the theme as key-value pairs. This table will help you understand for which of the keys you need to provide values in the $kendo-colors map in order to migrate your custom color values to the new Color System.
| Sass Variables (used prior to v8.0.0) | Sass Map Keys (used in v8.0.0 and later) |
|---|---|
| $kendo-color-primary | primary |
| $kendo-color-primary-contrast | on-primary |
| $kendo-color-secondary | secondary |
| $kendo-color-tertiary | tertiary |
| $kendo-color-info | info |
| $kendo-color-success | success |
| $kendo-color-warning | warning |
| $kendo-color-error | error |
| $kendo-color-light | light |
| $kendo-color-dark | dark |
| $kendo-color-inverse | inverse |
| $kendo-body-bg | app-surface |
| $kendo-body-text | on-app-surface |
| $kendo-subtle-text | subtle |
| $kendo-app-bg | surface |
| $kendo-app-text | on-app-surface |
| $kendo-app-border | border |
| $kendo-link-text | primary |
| $kendo-link-hover-text | primary-hover |
| $kendo-component-bg | surface-alt |
| $kendo-component-text | on-app-surface |
| $kendo-component-border | border |
| $kendo-base-bg | surface |
| $kendo-base-text | on-app-surface |
| $kendo-base-border | border |
| $kendo-hover-bg | base-subtle-hover |
| $kendo-hover-text | on-app-surface |
| $kendo-hover-border | border |
| $kendo-selected-bg | primary |
| $kendo-selected-text | on-primary |
| $kendo-selected-border | primary |
| $kendo-selected-hover-bg | primary-hover |
| $kendo-selected-hover-text | on-primary |
| $kendo-selected-hover-border | border |
| $kendo-component-header-bg | surface |
| $kendo-component-header-text | on-app-surface |
| $kendo-component-header-border | border |
| $kendo-invalid-text | error |
| $kendo-invalid-border | error |
| $kendo-disabled-text | on-app-surface |
