feat(classic): implement color system

Introduces a standardised Color Systems across all themes.
The Color System is implemented behind a backwards compatibility switch,
the `$kendo-enable-color-system` variable, and it is disabled by default.
The execution timeline is as follows:

- 2024 Q1: The Color System is available and turned off by default.
- 2024 Q2: The Color System is enabled by default, but can be turned off.
- 2025 Q2: Remove the backwards compatibility switch and the old system.

packages/bootstrap/scss/filter/_variables.scss

@@ -27,4 +27,4 @@ $kendo-filter-preview-operator-text: $kendo-subtle-text !default;
 
 /// The box shadow of the focused Filter toolbar.
 /// @group filter
-$kendo-filter-toolbar-focus-shadow: 0 0 0 .25rem if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 )) !default;
+$kendo-filter-toolbar-focus-shadow: 0 0 0 .25rem if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 )) !default;

packages/bootstrap/scss/listview/_variables.scss

@@ -57,4 +57,4 @@ $kendo-listview-item-focus-bg: null !default;
 $kendo-listview-item-focus-border: null !default;
 /// The box shadow of the focused ListView items.
 /// @group listview
-$kendo-listview-item-focus-shadow: inset 0 0 0 3px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .15 ), rgba( $kendo-listview-text, .15 )) !default;
+$kendo-listview-item-focus-shadow: inset 0 0 0 3px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .15 ), rgba( $kendo-listview-text, .15 )) !default;

packages/classic/scss/_variables.scss

@@ -1,17 +1,5 @@
 @import "./core/functions/index.import.scss";
 
-/// The color white.
-/// Note: you cannot change this value.
-/// @type Color
-/// @group color-system
-$kendo-color-white: #ffffff; // stylelint-disable-line scss/dollar-variable-default
-
-/// The color black.
-/// Note: you cannot change this value.
-/// @type Color
-/// @group color-system
-$kendo-color-black: #000000; // stylelint-disable-line scss/dollar-variable-default
-
 // Options
 $kendo-enable-rounded: true !default;
 $kendo-enable-shadows: true !default;
@@ -115,103 +103,6 @@ $kendo-zindex-loading: 100 !default;
 // Color settings
 $kendo-is-dark-theme: false !default;
 
-// Theme colors
-/// The color that focuses the user attention.
-/// Used for primary buttons and for elements of primary importance across the theme.
-/// @group color-system
-/// @type Color
-$kendo-color-primary: #f35800 !default;
-$kendo-color-primary-lighter: k-color-tint( $kendo-color-primary, 2 ) !default;
-$kendo-color-primary-darker: k-color-shade( $kendo-color-primary, 2 ) !default;
-
-/// The color used along with the primary color denoted by $kendo-color-primary.
-/// Used to provide contrast between the background and foreground colors.
-/// @group color-system
-/// @type Color
-$kendo-color-primary-contrast: k-contrast-legacy( $kendo-color-primary ) !default;
-
-/// The secondary color of the theme.
-/// @group color-system
-/// @type Color
-$kendo-color-secondary: #e9e9e9 !default;
-$kendo-color-secondary-lighter: k-color-tint( $kendo-color-secondary, 2 ) !default;
-$kendo-color-secondary-darker: k-color-shade( $kendo-color-secondary, 2 ) !default;
-
-/// The color used along with the secondary color denoted by $kendo-color-secondary.
-/// Used to provide contrast between the background and foreground colors.
-/// @group color-system
-/// @type Color
-$kendo-color-secondary-contrast: k-contrast-color( $kendo-color-secondary ) !default;
-
-/// The tertiary color of the theme.
-/// @group color-system
-/// @type Color
-$kendo-color-tertiary: #03a9f4 !default;
-$kendo-color-tertiary-lighter: k-color-tint( $kendo-color-tertiary, 2 ) !default;
-$kendo-color-tertiary-darker: k-color-shade( $kendo-color-tertiary, 2 ) !default;
-
-/// The color used along with the tertiary color denoted by $kendo-color-tertiary.
-/// Used to provide contrast between the background and foreground colors.
-/// @group color-system
-/// @type Color
-$kendo-color-tertiary-contrast: k-contrast-color( $kendo-color-tertiary ) !default;
-
-/// The color for informational messages and states.
-/// @group color-system
-/// @type Color
-$kendo-color-info: #2498bc !default;
-$kendo-color-info-lighter: k-color-tint( $kendo-color-info, 2 ) !default;
-$kendo-color-info-darker: k-color-shade( $kendo-color-info, 2 ) !default;
-
-/// The color for success messages and states.
-/// @group color-system
-/// @type Color
-$kendo-color-success: #3ea44e !default;
-$kendo-color-success-lighter: k-color-tint( $kendo-color-success, 2 ) !default;
-$kendo-color-success-darker: k-color-shade( $kendo-color-success, 2 ) !default;
-
-/// The color for warning messages and states.
-/// @group color-system
-/// @type Color
-$kendo-color-warning: #ff9800 !default;
-$kendo-color-warning-lighter: k-color-tint( $kendo-color-warning, 2 ) !default;
-$kendo-color-warning-darker: k-color-shade( $kendo-color-warning, 2 ) !default;
-
-/// The color for error messages and states.
-/// @group color-system
-/// @type Color
-$kendo-color-error: #d92800 !default;
-$kendo-color-error-lighter: k-color-tint( $kendo-color-error, 2 ) !default;
-$kendo-color-error-darker: k-color-shade( $kendo-color-error, 2 ) !default;
-
-/// The dark color of the theme.
-/// @group color-system
-/// @type Color
-$kendo-color-dark: #404040 !default;
-
-/// The light color of the theme.
-/// @group color-system
-/// @type Color
-$kendo-color-light: #ebebeb !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( $kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark ) !default;
-
-
-$kendo-theme-colors: (
-    "primary": $kendo-color-primary,
-    "secondary": $kendo-color-secondary,
-    "tertiary": $kendo-color-tertiary,
-    "info": $kendo-color-info,
-    "success": $kendo-color-success,
-    "warning": $kendo-color-warning,
-    "error": $kendo-color-error,
-    "dark": $kendo-color-dark,
-    "light": $kendo-color-light,
-    "inverse": $kendo-color-inverse
-) !default;
-
 
 // Typography
 
@@ -264,77 +155,12 @@ $kendo-font-weight-bold: 700 !default;
 $kendo-letter-spacing: null !default;
 
 
-// Generic styles
-
-// Root styles
-$kendo-body-bg: $kendo-color-white !default;
-$kendo-body-text: #272727 !default;
-
-$kendo-subtle-text: #646464 !default;
-
-$kendo-app-bg: $kendo-body-bg !default;
-$kendo-app-text: $kendo-body-text !default;
-$kendo-app-border: k-try-shade( $kendo-app-bg, 2 ) !default;
-
-// Link
-$kendo-link-text: $kendo-color-primary !default;
-$kendo-link-hover-text: $kendo-color-primary-darker !default;
-
-
-// Components
-
-/// The background of the components' chrome area.
-$kendo-base-bg: #f0f0f0 !default;
-/// The text color of the components' chrome area.
-$kendo-base-text: $kendo-body-text !default;
-/// The border color of the components' chrome area.
-$kendo-base-border: k-try-shade( $kendo-base-bg, 2 ) !default;
-/// The gradient background of the components' chrome area.
-$kendo-base-gradient: rgba( white, .1 ), rgba( white, 0 ) !default;
-
-/// Background color of a component.
-/// Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$kendo-grid-bg: $kendo-component-bg !default;`.
-/// @group component
-$kendo-component-bg: $kendo-body-bg !default;
-/// Text color of a component.
-/// Note: do not use this variable directly. Instead derive it as `$component-name-text` e.g. `$kendo-grid-text: $kendo-component-text !default;`.
-/// @group component
-$kendo-component-text: $kendo-body-text !default;
-/// Border color of a component.
-/// Note: do not use this variable directly. Instead derive it as `$component-name-border` e.g. `$kendo-grid-border: $kendo-component-border !default;`.
-/// @group component
-$kendo-component-border: $kendo-base-border !default;
-
-/// The background of hovered items.
-$kendo-hover-bg: k-try-shade( $kendo-base-bg, 1 ) !default;
-/// The text color of hovered items.
-$kendo-hover-text: $kendo-base-text !default;
-/// The border color of hovered items.
-$kendo-hover-border: k-try-shade( $kendo-hover-bg, 2 ) !default;
-/// The gradient background of hovered items.
-$kendo-hover-gradient: $kendo-base-gradient !default;
-
-/// The background of selected items.
-$kendo-selected-bg: $kendo-color-primary !default;
-/// The text color of selected items.
-$kendo-selected-text: k-contrast-legacy( $kendo-selected-bg ) !default;
-/// The border color of selected items.
-$kendo-selected-border: k-try-shade( $kendo-selected-bg, 2 ) !default;
-/// The gradient background of selected items.
-$kendo-selected-gradient: $kendo-base-gradient !default;
-
-$kendo-selected-hover-bg: k-try-shade( $kendo-selected-bg, 1 ) !default;
-$kendo-selected-hover-text: k-contrast-legacy( $kendo-selected-hover-bg ) !default;
-$kendo-selected-hover-border: $kendo-selected-border !default;
-$kendo-selected-hover-gradient: $kendo-selected-gradient !default;
-
 $kendo-focus-shadow: inset 0 0 0 2px rgba( black, .13 ) !default;
 
 $kendo-transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out !default;
 
 
 // Disabled mixin variables
-$kendo-disabled-text: #8d8d8d !default;
 $kendo-disabled-filter: grayscale(.1) !default;
 $kendo-disabled-opacity: .6 !default;
 
@@ -344,29 +170,6 @@ $kendo-disabled-styling: (
 ) !default;
 
 
-// Generic styles
-
-// TODO: refactor once we extract drag drop as separate module
-
-
-// Header
-$kendo-component-header-bg: $kendo-base-bg !default;
-$kendo-component-header-text: $kendo-base-text !default;
-$kendo-component-header-border: $kendo-base-border !default;
-$kendo-component-header-gradient: $kendo-base-gradient !default;
-
-
-// Validator
-$kendo-invalid-bg: null !default;
-$kendo-invalid-text: $kendo-color-error !default;
-$kendo-invalid-border: $kendo-color-error !default;
-$kendo-invalid-shadow: null !default;
-
-$kendo-valid-bg: null !default;
-$kendo-valid-text: $kendo-color-success !default;
-$kendo-valid-border: $kendo-color-success !default;
-$kendo-valid-shadow: null !default;
-
 // Loading
 $kendo-loading-opacity: .3 !default;
 $kendo-zindex-loading: 100 !default;

packages/classic/scss/adaptive/_variables.scss

@@ -7,7 +7,7 @@ $kendo-adaptive-content-bg: $kendo-app-bg !default;
 $kendo-adaptive-content-text: $kendo-app-text !default;
 
 $kendo-adaptive-menu-bg: $kendo-color-primary !default;
-$kendo-adaptive-menu-text: k-contrast-legacy( $kendo-adaptive-menu-bg ) !default;
+$kendo-adaptive-menu-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-adaptive-menu-bg )) !default;
 
 $kendo-adaptive-menu-clear-text: $kendo-color-primary !default;
 

packages/classic/scss/appbar/_variables.scss

@@ -37,14 +37,14 @@ $kendo-appbar-gap: k-map-get( $kendo-spacing, 2 ) !default;
 $kendo-appbar-light-bg: $kendo-color-light !default;
 /// The text color of the AppBar based on light theme color.
 /// @group appbar
-$kendo-appbar-light-text: k-contrast-color( $kendo-color-light ) !default;
+$kendo-appbar-light-text: if($kendo-enable-color-system, k-color( on-light ), k-contrast-color( $kendo-color-light )) !default;
 
 /// The background color of the AppBar based on dark theme color.
 /// @group appbar
 $kendo-appbar-dark-bg: $kendo-color-dark !default;
 /// The text color of the AppBar based on dark theme colorr.
 /// @group appbar
-$kendo-appbar-dark-text: k-contrast-color( $kendo-color-dark ) !default;
+$kendo-appbar-dark-text: if($kendo-enable-color-system, k-color( on-dark ), k-contrast-color( $kendo-color-dark )) !default;
 
 /// The box shadow of the AppBar.
 /// @group appbar

packages/classic/scss/button/_variables.scss

@@ -116,7 +116,7 @@ $kendo-button-bg: $kendo-base-bg !default;
 $kendo-button-text: $kendo-base-text !default;
 /// The base border color of the Button.
 /// @group button
-$kendo-button-border: k-try-shade( $kendo-button-bg, 2 ) !default;
+$kendo-button-border: if($kendo-enable-color-system, k-color( border ), k-try-shade( $kendo-button-bg, 2 )) !default;
 /// The base background gradient of the Button.
 /// @group button
 $kendo-button-gradient: $kendo-base-gradient !default;
@@ -126,13 +126,13 @@ $kendo-button-shadow: null !default;
 
 /// The base background of the hovered Button.
 /// @group button
-$kendo-button-hover-bg: k-try-shade( $kendo-button-bg, 1 ) !default;
+$kendo-button-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-button-bg, 1 )) !default;
 /// The base text color of the hovered Button.
 /// @group button
 $kendo-button-hover-text: null !default;
 /// The base border color of the hovered Button.
 /// @group button
-$kendo-button-hover-border: k-try-shade( $kendo-button-bg, 3 ) !default;
+$kendo-button-hover-border: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-button-bg, 3 )) !default;
 /// The base background gradient of the hovered Button.
 /// @group button
 $kendo-button-hover-gradient: null !default;
@@ -142,13 +142,13 @@ $kendo-button-hover-shadow: null !default;
 
 /// The base background color of the active Button.
 /// @group button
-$kendo-button-active-bg: k-try-shade( $kendo-button-bg, 2 ) !default;
+$kendo-button-active-bg: if($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-button-bg, 2 )) !default;
 /// The base text color of the active Button.
 /// @group button
 $kendo-button-active-text: null !default;
 /// The base border color of the active Button.
 /// @group button
-$kendo-button-active-border: k-try-shade( $kendo-button-bg, 4 ) !default;
+$kendo-button-active-border: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-button-bg, 4 )) !default;
 /// The base background gradient of the active Button.
 /// @group button
 $kendo-button-active-gradient: null !default;
@@ -161,7 +161,7 @@ $kendo-button-active-shadow: null !default;
 $kendo-button-selected-bg: $kendo-color-primary !default;
 /// The text color of the selected Button.
 /// @group button
-$kendo-button-selected-text: k-contrast-legacy( $kendo-button-selected-bg ) !default;
+$kendo-button-selected-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-button-selected-bg )) !default;
 /// The border color of the selected Button.
 /// @group button
 $kendo-button-selected-border: $kendo-button-selected-bg !default;
@@ -186,7 +186,7 @@ $kendo-button-focus-border: null !default;
 $kendo-button-focus-gradient: null !default;
 /// The base shadow of the focused Button.
 /// @group button
-$kendo-button-focus-shadow: 0 0 4px 0 rgba( $kendo-button-border, .75 ) !default;
+$kendo-button-focus-shadow: 0 0 4px 0 if($kendo-enable-color-system, rgba( k-color( border, true ), .75), rgba( $kendo-button-border, .75 )) !default;
 
 /// The base background of the disabled Button.
 /// @group button

packages/classic/scss/chat/_variables.scss

@@ -57,7 +57,7 @@ $kendo-chat-bubble-hover-shadow: k-elevation(2) !default;
 $kendo-chat-bubble-selected-shadow: k-elevation(3) !default;
 
 $kendo-chat-alt-bubble-bg: $kendo-color-primary !default;
-$kendo-chat-alt-bubble-text: k-contrast-legacy( $kendo-chat-alt-bubble-bg ) !default;
+$kendo-chat-alt-bubble-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-chat-alt-bubble-bg )) !default;
 $kendo-chat-alt-bubble-border: $kendo-chat-alt-bubble-bg !default;
 $kendo-chat-alt-bubble-shadow: k-elevation(1) !default;
 $kendo-chat-alt-bubble-hover-shadow: k-elevation(2) !default;

packages/classic/scss/checkbox/_variables.scss

@@ -81,7 +81,7 @@ $kendo-checkbox-hover-border: null !default;
 $kendo-checkbox-checked-bg: $kendo-color-primary !default;
 /// The text color of the checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-checked-text: k-contrast-legacy( $kendo-checkbox-checked-bg ) !default;
+$kendo-checkbox-checked-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-checkbox-checked-bg )) !default;
 /// The border color of the checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-checked-border: $kendo-checkbox-checked-bg !default;
@@ -107,7 +107,7 @@ $kendo-checkbox-focus-shadow: 0 0 0 2px rgba( black, .06 ) !default;
 $kendo-checkbox-focus-checked-border: null !default;
 /// The box shadow of the focused and checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-focus-checked-shadow: 0 0 0 2px rgba( $kendo-color-primary, .3 ) !default;
+$kendo-checkbox-focus-checked-shadow: 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( primary, true ), .3 ), rgba( $kendo-color-primary, .3 )) !default;
 
 /// The background color of the disabled CheckBox.
 /// @group checkbox

packages/classic/scss/chip/_variables.scss

@@ -115,7 +115,7 @@ $kendo-chip-solid-text: $kendo-button-text !default;
 $kendo-chip-solid-border: $kendo-button-border !default;
 /// The base shadow of the solid Chip.
 /// @group chip
-$kendo-chip-solid-shadow: 0 0 0 2px if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .16 ) ) !default;
+$kendo-chip-solid-shadow: 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .16 ), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .16 ) )) !default;
 /// The base gradient of the solid Chip.
 /// @group chip
 $kendo-chip-solid-gradient: $kendo-button-gradient !default;
@@ -152,14 +152,14 @@ $kendo-chip-outline-text: $kendo-chip-solid-text !default;
 $kendo-chip-outline-border: $kendo-chip-outline-text !default;
 /// The base shadow of the outline Chip.
 /// @group chip
-$kendo-chip-outline-shadow: 0 0 0 2px if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .16 ) ) !default;
+$kendo-chip-outline-shadow: 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .16 ), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .16 ) )) !default;
 
 /// The base background color of the hovered outline Chip.
 /// @group chip
 $kendo-chip-outline-hover-bg: $kendo-chip-outline-text !default;
 /// The base text color of the hovered outline Chip.
 /// @group chip
-$kendo-chip-outline-hover-text: k-contrast-legacy( $kendo-chip-outline-hover-bg ) !default;
+$kendo-chip-outline-hover-text: if($kendo-enable-color-system, k-color( base-subtle ), k-contrast-legacy( $kendo-chip-outline-hover-bg )) !default;
 
 /// The base background color of the selected outline Chip.
 /// @group chip

packages/classic/scss/core/_index.scss

@@ -1,10 +1,16 @@
 $wcag-min-contrast-ratio: 4.5 !default;
 
+// Color System
+@import "./color-system/_swatch.scss";
+
 // Variables
 @import "../_variables.scss";
 
 @import "@progress/kendo-theme-core/scss/index.import.scss";
 
+// Backward compatibility
+@import "./color-system/_swatch-legacy.scss";
+
 // Expose
 @include exports("kendo-core-styles") {
     @include kendo-core--styles();