From 2e73df445cbc6d1262c3b142f2c8f966781b400d Mon Sep 17 00:00:00 2001
From: Ivo Valkov <ivalkov@progress.com>
Date: Thu, 26 Oct 2023 10:56:19 +0300
Subject: [PATCH] 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.
---
 .../bootstrap/scss/filter/_variables.scss     |   2 +-
 .../bootstrap/scss/listview/_variables.scss   |   2 +-
 packages/classic/scss/_variables.scss         | 197 ---------
 .../classic/scss/adaptive/_variables.scss     |   2 +-
 packages/classic/scss/appbar/_variables.scss  |   4 +-
 packages/classic/scss/button/_variables.scss  |  14 +-
 packages/classic/scss/chat/_variables.scss    |   2 +-
 .../classic/scss/checkbox/_variables.scss     |   4 +-
 packages/classic/scss/chip/_variables.scss    |   6 +-
 packages/classic/scss/core/_index.scss        |   6 +
 .../scss/core/color-system/_palettes.scss     | 277 ++++++++++++
 .../core/color-system/_swatch-legacy.scss     |  62 +++
 .../scss/core/color-system/_swatch.scss       | 397 ++++++++++++++++++
 .../scss/core/color-system/index.import.scss  |   1 -
 packages/classic/scss/dataviz/_variables.scss |  84 ++--
 .../classic/scss/dock-manager/_variables.scss |   2 +-
 .../classic/scss/dropzone/_variables.scss     |   2 +-
 packages/classic/scss/editor/_variables.scss  |   2 +-
 .../scss/expansion-panel/_variables.scss      |   3 +-
 .../classic/scss/filemanager/_variables.scss  |   4 +-
 packages/classic/scss/forms/_variables.scss   |   2 +-
 packages/classic/scss/gantt/_variables.scss   |  20 +-
 packages/classic/scss/grid/_variables.scss    |  19 +-
 packages/classic/scss/input/_variables.scss   |  12 +-
 .../classic/scss/listview/_variables.scss     |   2 +-
 packages/classic/scss/map/_variables.scss     |   2 +-
 .../classic/scss/mediaplayer/_variables.scss  |   2 +-
 packages/classic/scss/menu/_variables.scss    |   2 +-
 .../classic/scss/notification/_variables.scss |   2 +-
 .../classic/scss/panelbar/_variables.scss     |   7 +-
 .../classic/scss/pivotgrid/_variables.scss    |  10 +-
 .../classic/scss/progressbar/_variables.scss  |   6 +-
 .../classic/scss/scheduler/_variables.scss    |   6 +-
 .../classic/scss/scrollview/_variables.scss   |   2 +-
 .../classic/scss/signature/_variables.scss    |   2 +-
 .../classic/scss/skeleton/_variables.scss     |   2 +-
 packages/classic/scss/slider/_variables.scss  |  16 +-
 .../classic/scss/splitter/_variables.scss     |   2 +-
 .../classic/scss/spreadsheet/_variables.scss  |   8 +-
 packages/classic/scss/stepper/_variables.scss |  14 +-
 packages/classic/scss/switch/_variables.scss  |  14 +-
 packages/classic/scss/table/_variables.scss   |   6 +-
 .../classic/scss/taskboard/_variables.scss    |   7 +-
 .../classic/scss/timeline/_variables.scss     |   8 +-
 packages/classic/scss/tooltip/_variables.scss |   8 +-
 .../scss/core/color-system/_swatch.scss       |   2 +-
 packages/fluent/scss/all.scss                 |   2 +-
 packages/fluent/scss/core/_index.scss         |   2 +-
 .../core/color-system/_swatch-legacy.scss     |   4 +-
 .../scss/core/color-system/_swatch.scss       |   7 +-
 packages/fluent/scss/input/_variables.scss    |   6 +
 .../core/color-system/_swatch-legacy.scss     |   2 +-
 .../scss/core/color-system/_swatch.scss       |   6 +-
 53 files changed, 923 insertions(+), 362 deletions(-)
 create mode 100644 packages/classic/scss/core/color-system/_palettes.scss
 create mode 100644 packages/classic/scss/core/color-system/_swatch-legacy.scss
 create mode 100644 packages/classic/scss/core/color-system/_swatch.scss
 delete mode 100644 packages/classic/scss/core/color-system/index.import.scss

diff --git a/packages/bootstrap/scss/filter/_variables.scss b/packages/bootstrap/scss/filter/_variables.scss
index 39bc641e221..dc0c78a430f 100644
--- a/packages/bootstrap/scss/filter/_variables.scss
+++ b/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;
\ No newline at end of file
+$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;
diff --git a/packages/bootstrap/scss/listview/_variables.scss b/packages/bootstrap/scss/listview/_variables.scss
index ac9128ff125..f05a62b499d 100644
--- a/packages/bootstrap/scss/listview/_variables.scss
+++ b/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;
\ No newline at end of file
+$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;
diff --git a/packages/classic/scss/_variables.scss b/packages/classic/scss/_variables.scss
index ebfdbe2b26c..7dbca352946 100644
--- a/packages/classic/scss/_variables.scss
+++ b/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;
diff --git a/packages/classic/scss/adaptive/_variables.scss b/packages/classic/scss/adaptive/_variables.scss
index 30ecac04547..8651f2b7206 100644
--- a/packages/classic/scss/adaptive/_variables.scss
+++ b/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;
 
diff --git a/packages/classic/scss/appbar/_variables.scss b/packages/classic/scss/appbar/_variables.scss
index 7ac46f97649..650175ee374 100644
--- a/packages/classic/scss/appbar/_variables.scss
+++ b/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
diff --git a/packages/classic/scss/button/_variables.scss b/packages/classic/scss/button/_variables.scss
index e3660978034..2e59192d8ec 100644
--- a/packages/classic/scss/button/_variables.scss
+++ b/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
diff --git a/packages/classic/scss/chat/_variables.scss b/packages/classic/scss/chat/_variables.scss
index 59063ea7be3..68edc4fdb71 100644
--- a/packages/classic/scss/chat/_variables.scss
+++ b/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;
diff --git a/packages/classic/scss/checkbox/_variables.scss b/packages/classic/scss/checkbox/_variables.scss
index 7356811b756..2265acd28a3 100644
--- a/packages/classic/scss/checkbox/_variables.scss
+++ b/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
diff --git a/packages/classic/scss/chip/_variables.scss b/packages/classic/scss/chip/_variables.scss
index 9f3e3574363..bc225c61df9 100644
--- a/packages/classic/scss/chip/_variables.scss
+++ b/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
diff --git a/packages/classic/scss/core/_index.scss b/packages/classic/scss/core/_index.scss
index 84b4130c27d..2886358e355 100644
--- a/packages/classic/scss/core/_index.scss
+++ b/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();
diff --git a/packages/classic/scss/core/color-system/_palettes.scss b/packages/classic/scss/core/color-system/_palettes.scss
new file mode 100644
index 00000000000..d0efa4528e0
--- /dev/null
+++ b/packages/classic/scss/core/color-system/_palettes.scss
@@ -0,0 +1,277 @@
+$_default-palette-ash-gray: (
+    white: #ffffff,
+    1: #fafafa,
+    2: #f0f0f0,
+    3: #ebebeb,
+    4: #dddddd,
+    5: #d6d6d6,
+    6: #cacaca,
+    7: #b6b6b6,
+    8: #a3a3a3,
+    9: #8f8f8f,
+    10: #7a7a7a,
+    11: #666666,
+    12: #525252,
+    13: #404040,
+    14: #333333,
+    15: #272727,
+    black: #000000,
+);
+
+$_default-palette-tangerine-orange: (
+    1: #fff2eb,
+    2: #ffe5d6,
+    3: #ffd8c2,
+    4: #ffcbad,
+    5: #ffbe99,
+    6: #ffa570,
+    7: #ff8b47,
+    8: #ff711f,
+    9: #f35800,
+    10: #e05100,
+    11: #cc4a00,
+    12: #b94300,
+    13: #a53c00,
+    14: #7a2d00,
+    15: #3d1600,
+);
+
+$_default-palette-dodger-blue: (
+    1: #ebf8ff,
+    2: #d7f2ff,
+    3: #b8e8fe,
+    4: #9cdffe,
+    5: #72d1fe,
+    6: #49c4fd,
+    7: #2cbbfd,
+    8: #0db1fd,
+    9: #03a9f4,
+    10: #039be0,
+    11: #038ecd,
+    12: #0280b9,
+    13: #0273a6,
+    14: #014c6f,
+    15: #01364e,
+);
+
+$_default-palette-grass-green: (
+    1: #f1f8f2,
+    2: #e3f2e6,
+    3: #d8eddc,
+    4: #bbdfc1,
+    5: #9ed1a6,
+    6: #82c48c,
+    7: #6ebb7a,
+    8: #4db25c,
+    9: #3ea44e,
+    10: #399748,
+    11: #348a42,
+    12: #2f7d3b,
+    13: #2a7035,
+    14: #1f5126,
+    15: #16391b,
+);
+
+$_default-palette-lake-blue: (
+    1: #eef6fb,
+    2: #deeef7,
+    3: #cce5f3,
+    4: #a6d1ea,
+    5: #8bc3e4,
+    6: #6ab2dc,
+    7: #409cd2,
+    8: #208ccb,
+    9: #007bc3,
+    10: #0071b3,
+    11: #0067a4,
+    12: #005d94,
+    13: #005485,
+    14: #004166,
+    15: #002b44,
+);
+
+$_default-palette-honey-yellow: (
+    1: #fff7eb,
+    2: #ffefd6,
+    3: #ffe7c2,
+    4: #ffdead,
+    5: #ffd699,
+    6: #ffc670,
+    7: #ffb240,
+    8: #ffa41f,
+    9: #ff9800,
+    10: #eb8c00,
+    11: #d68000,
+    12: #c27400,
+    13: #ad6700,
+    14: #854f00,
+    15: #593500,
+);
+
+$_default-palette-brick-red: (
+    1: #fcf0ed,
+    2: #f9e1dc,
+    3: #f7d4cc,
+    4: #f4c3b8,
+    5: #f2b4a6,
+    6: #ec8e79,
+    7: #e35e40,
+    8: #de4320,
+    9: #d92800,
+    10: #c82500,
+    11: #b62200,
+    12: #a51e00,
+    13: #941b00,
+    14: #701500,
+    15: #4c0e00,
+);
+
+$_default-palette-coral: (
+    1: #fff6f5,
+    2: #ffeceb,
+    3: #ffdedb,
+    4: #ffc8c4,
+    5: #ffb1ac,
+    6: #ff9d97,
+    7: #ff8a82,
+    8: #ff766d,
+    9: #ff6358,
+    10: #ea5a51,
+    11: #d45349,
+    12: #bf4a42,
+    13: #a33f38,
+    14: #80322c,
+    15: #5c201c,
+);
+
+$_default-palette-pineapple-yellow: (
+    1: #fffaeb,
+    2: #fff7db,
+    3: #fff3cc,
+    4: #ffeeb8,
+    5: #ffe9a2,
+    6: #ffe38b,
+    7: #ffdd74,
+    8: #ffd85d,
+    9: #ffd246,
+    10: #eac040,
+    11: #d4af3b,
+    12: #bf9d35,
+    13: #a0832c,
+    14: #806923,
+    15: #403412,
+);
+
+$_default-palette-apple-green: (
+    1: #f3fbee,
+    2: #e9f8de,
+    3: #def4ce,
+    4: #d2f0bd,
+    5: #bbe99b,
+    6: #aae382,
+    7: #9add69,
+    8: #89d750,
+    9: #78d237,
+    10: #6ec032,
+    11: #64AF2E,
+    12: #5a9d29,
+    13: #4a8221,
+    14: #3c691c,
+    15: #1c300d,
+);
+
+$_default-palette-pacific-blue: (
+    1: #ebf8fa,
+    2: #d6f1f5,
+    3: #c2e9ef,
+    4: #aee2ea,
+    5: #93d9e3,
+    6: #75d0db,
+    7: #5ec7d6,
+    8: #43becf,
+    9: #28b4c8,
+    10: #24a6b7,
+    11: #2197a6,
+    12: #1e8796,
+    13: #197480,
+    14: #145a64,
+    15: #0a2e33,
+);
+
+$_default-palette-bright-blue: (
+    1: #ecf2fe,
+    2: #d8e5fd,
+    3: #c5d8fc,
+    4: #b1cbfb,
+    5: #96b9fa,
+    6: #7ba7f9,
+    7: #6296f7,
+    8: #4684f6,
+    9: #2d73f5,
+    10: #2969e1,
+    11: #2660cc,
+    12: #2256b8,
+    13: #1d499a,
+    14: #173a7b,
+    15: #0c1e40,
+);
+
+$_default-palette-orchid-purple: (
+    1: #f8f0fa,
+    2: #f1e1f5,
+    3: #e7caed,
+    4: #ddb3e5,
+    5: #d5a2df,
+    6: #c98ad6,
+    7: #bf74ce,
+    8: #b45dc6,
+    9: #9d40b0,
+    10: #9c40ae,
+    11: #8e3b9e,
+    12: #80358e,
+    13: #672b73,
+    14: #55235f,
+    15: #28112d,
+);
+
+
+// stylelint-disable scss/no-global-function-names
+$kendo-palette-ash-gray: $_default-palette-ash-gray !default;
+$kendo-palette-ash-gray: map-merge($_default-palette-ash-gray, $kendo-palette-ash-gray);
+
+$kendo-palette-tangerine-orange: $_default-palette-tangerine-orange !default;
+$kendo-palette-tangerine-orange: map-merge($_default-palette-tangerine-orange, $kendo-palette-tangerine-orange);
+
+$kendo-palette-dodger-blue: $_default-palette-dodger-blue !default;
+$kendo-palette-dodger-blue: map-merge($_default-palette-dodger-blue, $kendo-palette-dodger-blue);
+
+$kendo-palette-grass-green: $_default-palette-grass-green !default;
+$kendo-palette-grass-green: map-merge($_default-palette-grass-green, $kendo-palette-grass-green);
+
+$kendo-palette-lake-blue: $_default-palette-lake-blue !default;
+$kendo-palette-lake-blue: map-merge($_default-palette-lake-blue, $kendo-palette-lake-blue);
+
+$kendo-palette-honey-yellow: $_default-palette-honey-yellow !default;
+$kendo-palette-honey-yellow: map-merge($_default-palette-honey-yellow, $kendo-palette-honey-yellow);
+
+$kendo-palette-brick-red: $_default-palette-brick-red !default;
+$kendo-palette-brick-red: map-merge($_default-palette-brick-red, $kendo-palette-brick-red);
+
+$kendo-palette-coral: $_default-palette-coral !default;
+$kendo-palette-coral: map-merge($_default-palette-coral, $kendo-palette-coral);
+
+$kendo-palette-pineapple-yellow: $_default-palette-pineapple-yellow !default;
+$kendo-palette-pineapple-yellow: map-merge($_default-palette-pineapple-yellow, $kendo-palette-pineapple-yellow);
+
+$kendo-palette-apple-green: $_default-palette-apple-green !default;
+$kendo-palette-apple-green: map-merge($_default-palette-apple-green, $kendo-palette-apple-green);
+
+$kendo-palette-pacific-blue: $_default-palette-pacific-blue !default;
+$kendo-palette-pacific-blue: map-merge($_default-palette-pacific-blue, $kendo-palette-pacific-blue);
+
+$kendo-palette-bright-blue: $_default-palette-bright-blue !default;
+$kendo-palette-bright-blue: map-merge($_default-palette-bright-blue, $kendo-palette-bright-blue);
+
+$kendo-palette-orchid-purple: $_default-palette-orchid-purple !default;
+$kendo-palette-orchid-purple: map-merge($_default-palette-orchid-purple, $kendo-palette-orchid-purple);
+// stylelint-enable scss/no-global-function-names
\ No newline at end of file
diff --git a/packages/classic/scss/core/color-system/_swatch-legacy.scss b/packages/classic/scss/core/color-system/_swatch-legacy.scss
new file mode 100644
index 00000000000..a77fd11184e
--- /dev/null
+++ b/packages/classic/scss/core/color-system/_swatch-legacy.scss
@@ -0,0 +1,62 @@
+@if ($kendo-enable-color-system) {
+    $kendo-color-primary: k-color( primary );
+    $kendo-color-primary-contrast: k-color( on-primary );
+    $kendo-color-secondary: k-color( secondary );
+    $kendo-color-tertiary: k-color( tertiary );
+    $kendo-color-info: k-color( info );
+    $kendo-color-success: k-color( success );
+    $kendo-color-warning: k-color( warning );
+    $kendo-color-error: k-color( error );
+    $kendo-color-dark: k-color( dark );
+    $kendo-color-light: k-color( light );
+    $kendo-color-inverse: $kendo-color-dark;
+    $kendo-body-bg: k-color( app-surface );
+    $kendo-body-text: k-color( on-app-surface );
+    $kendo-subtle-text: k-color( subtle );
+    $kendo-app-bg: $kendo-body-bg;
+    $kendo-app-text: $kendo-body-text;
+    $kendo-app-border: k-color( border );
+    $kendo-link-text: $kendo-color-primary;
+    $kendo-link-hover-text: k-color( primary-hover );
+    $kendo-component-bg: $kendo-body-bg;
+    $kendo-component-text: $kendo-body-text;
+    $kendo-component-border: $kendo-app-border;
+    $kendo-base-bg: k-color( surface );
+    $kendo-base-text: $kendo-body-text;
+    $kendo-base-border: $kendo-app-border;
+    $kendo-base-gradient: null;
+    $kendo-hover-bg: k-color( base-hover );
+    $kendo-hover-text: $kendo-base-text;
+    $kendo-hover-border: $kendo-base-border;
+    $kendo-hover-gradient: null;
+    $kendo-selected-bg: $kendo-color-primary;
+    $kendo-selected-text: $kendo-color-primary-contrast;
+    $kendo-selected-border: k-color( primary );
+    $kendo-selected-gradient: $kendo-base-gradient;
+    $kendo-selected-hover-bg: k-color( primary-hover );
+    $kendo-selected-hover-text: $kendo-selected-text;
+    $kendo-selected-hover-border: k-color( primary-hover );
+    $kendo-selected-hover-gradient: $kendo-base-gradient;
+    $kendo-disabled-text: k-color( on-app-surface );
+    $kendo-component-header-bg: $kendo-base-bg;
+    $kendo-component-header-text: $kendo-base-text;
+    $kendo-component-header-border: $kendo-base-border;
+    $kendo-component-header-gradient: $kendo-base-gradient;
+    $kendo-invalid-bg: null;
+    $kendo-invalid-text: $kendo-color-error;
+    $kendo-invalid-border: $kendo-color-error;
+    $kendo-invalid-shadow: null;
+
+    $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,
+    );
+}
diff --git a/packages/classic/scss/core/color-system/_swatch.scss b/packages/classic/scss/core/color-system/_swatch.scss
new file mode 100644
index 00000000000..1900be4de70
--- /dev/null
+++ b/packages/classic/scss/core/color-system/_swatch.scss
@@ -0,0 +1,397 @@
+@import "@progress/kendo-theme-core/scss/functions/index.import.scss";
+@import "@progress/kendo-theme-core/scss/color-system/_constants.scss";
+@import "./_palettes.scss";
+
+// Config
+$kendo-enable-color-system: false !default;
+
+// Colors
+$_default-colors: (
+    // Misc
+    app-surface: k-map-get( $kendo-palette-ash-gray, white ),
+    on-app-surface: k-map-get( $kendo-palette-ash-gray, 15 ),
+    subtle: k-map-get( $kendo-palette-ash-gray, 11 ),
+    surface: k-map-get( $kendo-palette-ash-gray, 2 ),
+    surface-alt: k-map-get( $kendo-palette-ash-gray, white ),
+    border: k-map-get( $kendo-palette-ash-gray, 6 ),
+    border-alt: k-map-get( $kendo-palette-ash-gray, 7 ),
+    // Base
+    base-subtle: k-map-get( $kendo-palette-ash-gray, 2 ),
+    base-subtle-hover: k-map-get( $kendo-palette-ash-gray, 3 ),
+    base-subtle-active: k-map-get( $kendo-palette-ash-gray, 4 ),
+    base: k-map-get( $kendo-palette-ash-gray, 3 ),
+    base-hover: k-map-get( $kendo-palette-ash-gray, 4 ),
+    base-active: k-map-get( $kendo-palette-ash-gray, 5 ),
+    base-emphasis: k-map-get( $kendo-palette-ash-gray, 6 ),
+    base-on-subtle: k-map-get( $kendo-palette-ash-gray, 15 ),
+    on-base: k-map-get( $kendo-palette-ash-gray, 15 ),
+    base-on-surface: k-map-get( $kendo-palette-ash-gray, 15 ),
+    // Primary
+    primary-subtle: k-map-get( $kendo-palette-tangerine-orange, 1 ),
+    primary-subtle-hover: k-map-get( $kendo-palette-tangerine-orange, 2 ),
+    primary-subtle-active: k-map-get( $kendo-palette-tangerine-orange, 3 ),
+    primary: k-map-get( $kendo-palette-tangerine-orange, 9 ),
+    primary-hover: k-map-get( $kendo-palette-tangerine-orange, 10 ),
+    primary-active: k-map-get( $kendo-palette-tangerine-orange, 11 ),
+    primary-emphasis: k-map-get( $kendo-palette-tangerine-orange, 7 ),
+    primary-on-subtle: k-map-get( $kendo-palette-tangerine-orange, 15 ),
+    on-primary: k-map-get( $kendo-palette-ash-gray, white ),
+    primary-on-surface: k-map-get( $kendo-palette-tangerine-orange, 9 ),
+    // Secondary
+    secondary-subtle: k-map-get( $kendo-palette-ash-gray, 6 ),
+    secondary-subtle-hover: k-map-get( $kendo-palette-ash-gray, 7 ),
+    secondary-subtle-active: k-map-get( $kendo-palette-ash-gray, 8 ),
+    secondary: k-map-get( $kendo-palette-ash-gray, 7 ),
+    secondary-hover: k-map-get( $kendo-palette-ash-gray, 8 ),
+    secondary-active: k-map-get( $kendo-palette-ash-gray, 9 ),
+    secondary-emphasis: k-map-get( $kendo-palette-ash-gray, 10 ),
+    secondary-on-subtle: k-map-get( $kendo-palette-ash-gray, 15 ),
+    on-secondary: k-map-get( $kendo-palette-ash-gray, black ),
+    secondary-on-surface: k-map-get( $kendo-palette-ash-gray, 9 ),
+    // Tertiary
+    tertiary-subtle: k-map-get( $kendo-palette-dodger-blue, 4 ),
+    tertiary-subtle-hover: k-map-get( $kendo-palette-dodger-blue, 5 ),
+    tertiary-subtle-active: k-map-get( $kendo-palette-dodger-blue, 6 ),
+    tertiary: k-map-get( $kendo-palette-dodger-blue, 9 ),
+    tertiary-hover: k-map-get( $kendo-palette-dodger-blue, 10 ),
+    tertiary-active: k-map-get( $kendo-palette-dodger-blue, 11 ),
+    tertiary-emphasis: k-map-get( $kendo-palette-dodger-blue, 7 ),
+    tertiary-on-subtle: k-map-get( $kendo-palette-dodger-blue, 15 ),
+    on-tertiary: k-map-get( $kendo-palette-ash-gray, white ),
+    tertiary-on-surface: k-map-get( $kendo-palette-dodger-blue, 13 ),
+    // Info
+    info-subtle: k-map-get( $kendo-palette-lake-blue, 3 ),
+    info-subtle-hover: k-map-get( $kendo-palette-lake-blue, 4 ),
+    info-subtle-active: k-map-get( $kendo-palette-lake-blue, 6 ),
+    info: k-map-get( $kendo-palette-lake-blue, 9 ),
+    info-hover: k-map-get( $kendo-palette-lake-blue, 10 ),
+    info-active: k-map-get( $kendo-palette-lake-blue, 11 ),
+    info-emphasis: k-map-get( $kendo-palette-lake-blue, 7 ),
+    info-on-subtle: k-map-get( $kendo-palette-lake-blue, 15 ),
+    on-info: k-map-get( $kendo-palette-ash-gray, white ),
+    info-on-surface: k-map-get( $kendo-palette-lake-blue, 13 ),
+    // Success
+    success-subtle: k-map-get( $kendo-palette-grass-green, 4 ),
+    success-subtle-hover: k-map-get( $kendo-palette-grass-green, 5 ),
+    success-subtle-active: k-map-get( $kendo-palette-grass-green, 6 ),
+    success: k-map-get( $kendo-palette-grass-green, 9 ),
+    success-hover: k-map-get( $kendo-palette-grass-green, 10 ),
+    success-active: k-map-get( $kendo-palette-grass-green, 11 ),
+    success-emphasis: k-map-get( $kendo-palette-grass-green, 7 ),
+    success-on-subtle: k-map-get( $kendo-palette-grass-green, 15 ),
+    on-success: k-map-get( $kendo-palette-ash-gray, white ),
+    success-on-surface: k-map-get( $kendo-palette-grass-green, 13 ),
+    // Warning
+    warning-subtle: k-map-get( $kendo-palette-honey-yellow, 4 ),
+    warning-subtle-hover: k-map-get( $kendo-palette-honey-yellow, 5 ),
+    warning-subtle-active: k-map-get( $kendo-palette-honey-yellow, 6 ),
+    warning: k-map-get( $kendo-palette-honey-yellow, 8 ),
+    warning-hover: k-map-get( $kendo-palette-honey-yellow, 9 ),
+    warning-active: k-map-get( $kendo-palette-honey-yellow, 10 ),
+    warning-emphasis: k-map-get( $kendo-palette-honey-yellow, 7 ),
+    warning-on-subtle: k-map-get( $kendo-palette-honey-yellow, 15 ),
+    on-warning: k-map-get( $kendo-palette-ash-gray, black ),
+    warning-on-surface: k-map-get( $kendo-palette-honey-yellow, 8 ),
+    // Error
+    error-subtle: k-map-get( $kendo-palette-brick-red, 4 ),
+    error-subtle-hover: k-map-get( $kendo-palette-brick-red, 5 ),
+    error-subtle-active: k-map-get( $kendo-palette-brick-red, 6 ),
+    error: k-map-get( $kendo-palette-brick-red, 9 ),
+    error-hover: k-map-get( $kendo-palette-brick-red, 10 ),
+    error-active: k-map-get( $kendo-palette-brick-red, 11 ),
+    error-emphasis: k-map-get( $kendo-palette-brick-red, 7 ),
+    error-on-subtle: k-map-get( $kendo-palette-brick-red, 15 ),
+    on-error: k-map-get( $kendo-palette-ash-gray, white ),
+    error-on-surface: k-map-get( $kendo-palette-brick-red, 13 ),
+    // Light
+    light-subtle: k-map-get( $kendo-palette-ash-gray, 2 ),
+    light-subtle-hover: k-map-get( $kendo-palette-ash-gray, 3 ),
+    light-subtle-active: k-map-get( $kendo-palette-ash-gray, 4 ),
+    light: k-map-get( $kendo-palette-ash-gray, 3 ),
+    light-hover: k-map-get( $kendo-palette-ash-gray, 4 ),
+    light-active: k-map-get( $kendo-palette-ash-gray, 5 ),
+    light-emphasis: k-map-get( $kendo-palette-ash-gray, 6 ),
+    light-on-subtle: k-map-get( $kendo-palette-ash-gray, 15 ),
+    on-light: k-map-get( $kendo-palette-ash-gray, black ),
+    light-on-surface: k-map-get( $kendo-palette-ash-gray, 3 ),
+    // Dark
+    dark-subtle: k-map-get( $kendo-palette-ash-gray, 6 ),
+    dark-subtle-hover: k-map-get( $kendo-palette-ash-gray, 7 ),
+    dark-subtle-active: k-map-get( $kendo-palette-ash-gray, 8 ),
+    dark: k-map-get( $kendo-palette-ash-gray, 13 ),
+    dark-hover: k-map-get( $kendo-palette-ash-gray, 14 ),
+    dark-active: k-map-get( $kendo-palette-ash-gray, 15 ),
+    dark-emphasis: k-map-get( $kendo-palette-ash-gray, 10 ),
+    dark-on-subtle: k-map-get( $kendo-palette-ash-gray, black ),
+    on-dark: k-map-get( $kendo-palette-ash-gray, white ),
+    dark-on-surface: k-map-get( $kendo-palette-ash-gray, 14 ),
+    // Inverse
+    inverse-subtle: k-map-get( $kendo-palette-ash-gray, 6 ),
+    inverse-subtle-hover: k-map-get( $kendo-palette-ash-gray, 7 ),
+    inverse-subtle-active: k-map-get( $kendo-palette-ash-gray, 8 ),
+    inverse: k-map-get( $kendo-palette-ash-gray, 13 ),
+    inverse-hover: k-map-get( $kendo-palette-ash-gray, 14 ),
+    inverse-active: k-map-get( $kendo-palette-ash-gray, 15 ),
+    inverse-emphasis: k-map-get( $kendo-palette-ash-gray, 10 ),
+    inverse-on-subtle: k-map-get( $kendo-palette-ash-gray, black ),
+    on-inverse: k-map-get( $kendo-palette-ash-gray, white ),
+    inverse-on-surface: k-map-get( $kendo-palette-ash-gray, 14 ),
+    // Series A
+    series-a: k-map-get( $kendo-palette-coral, 9 ),
+    series-a-bold: k-map-get( $kendo-palette-coral, 12 ),
+    series-a-bolder: k-map-get( $kendo-palette-coral, 14 ),
+    series-a-subtle: k-map-get( $kendo-palette-coral, 5 ),
+    series-a-subtler: k-map-get( $kendo-palette-coral, 7 ),
+    // Series B
+    series-b: k-map-get( $kendo-palette-pineapple-yellow, 9 ),
+    series-b-bold: k-map-get( $kendo-palette-pineapple-yellow, 12 ),
+    series-b-bolder: k-map-get( $kendo-palette-pineapple-yellow, 14 ),
+    series-b-subtle: k-map-get( $kendo-palette-pineapple-yellow, 5 ),
+    series-b-subtler: k-map-get( $kendo-palette-pineapple-yellow, 7 ),
+    // Series C
+    series-c: k-map-get( $kendo-palette-apple-green, 9 ),
+    series-c-bold: k-map-get( $kendo-palette-apple-green, 12 ),
+    series-c-bolder: k-map-get( $kendo-palette-apple-green, 14 ),
+    series-c-subtle: k-map-get( $kendo-palette-apple-green, 5 ),
+    series-c-subtler: k-map-get( $kendo-palette-apple-green, 7 ),
+    // Series D
+    series-d: k-map-get( $kendo-palette-pacific-blue, 9 ),
+    series-d-bold: k-map-get( $kendo-palette-pacific-blue, 12 ),
+    series-d-bolder: k-map-get( $kendo-palette-pacific-blue, 14 ),
+    series-d-subtle: k-map-get( $kendo-palette-pacific-blue, 5 ),
+    series-d-subtler: k-map-get( $kendo-palette-pacific-blue, 7 ),
+    // Series Е
+    series-e: k-map-get( $kendo-palette-bright-blue, 9 ),
+    series-e-bold: k-map-get( $kendo-palette-bright-blue, 12 ),
+    series-e-bolder: k-map-get( $kendo-palette-bright-blue, 14 ),
+    series-e-subtle: k-map-get( $kendo-palette-bright-blue, 5 ),
+    series-e-subtler: k-map-get( $kendo-palette-bright-blue, 7 ),
+    // Series F
+    series-f: k-map-get( $kendo-palette-orchid-purple, 9 ),
+    series-f-bold: k-map-get( $kendo-palette-orchid-purple, 12 ),
+    series-f-bolder: k-map-get( $kendo-palette-orchid-purple, 14 ),
+    series-f-subtle: k-map-get( $kendo-palette-orchid-purple, 5 ),
+    series-f-subtler: k-map-get( $kendo-palette-orchid-purple, 7 ),
+) !default;
+
+/// The global default Colors map.
+/// @group color-system
+$kendo-colors: $_default-colors !default;
+
+$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;
+
+// Generic styles
+
+/// Background color of the body.
+/// @group common
+$kendo-body-bg: $kendo-color-white !default;
+/// Text color of the body.
+/// @group common
+$kendo-body-text: #272727 !default;
+
+/// Subtle text color.
+/// @group common
+$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
+/// Text color of the links.
+/// @group common
+$kendo-link-text: $kendo-color-primary !default;
+/// Text color of the links on hover.
+/// @group common
+$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;
+
+/// The background of selected and hovered items.
+$kendo-selected-hover-bg: k-try-shade( $kendo-selected-bg, 1 ) !default;
+/// The text color of selected and hovered items.
+$kendo-selected-hover-text: k-contrast-legacy( $kendo-selected-hover-bg ) !default;
+/// The border of selected and hovered items.
+$kendo-selected-hover-border: $kendo-selected-border !default;
+/// The gradient of selected and hovered items.
+$kendo-selected-hover-gradient: $kendo-selected-gradient !default;
+
+/// Text color of disabled items.
+$kendo-disabled-text: #8d8d8d !default;
+
+// Generic styles
+
+/// Background color of the component header.
+/// @group component
+$kendo-component-header-bg: $kendo-base-bg !default;
+/// Text color of the component header.
+/// @group component
+$kendo-component-header-text: $kendo-base-text !default;
+/// Border color of the component header.
+/// @group component
+$kendo-component-header-border: $kendo-base-border !default;
+/// Gradient of the component header.
+/// @group component
+$kendo-component-header-gradient: $kendo-base-gradient !default;
+
+/// Background color of the invalid items.
+/// @group component
+$kendo-invalid-bg: null !default;
+/// Text color of the invalid items.
+/// @group component
+$kendo-invalid-text: $kendo-color-error !default;
+/// Border color of the invalid items.
+/// @group component
+$kendo-invalid-border: $kendo-color-error !default;
+/// Shadow of the invalid items.
+/// @group component
+$kendo-invalid-shadow: null !default;
+
+/// Background color of the valid items.
+/// @group component
+$kendo-valid-bg: null !default;
+/// Text color of the valid items.
+/// @group component
+$kendo-valid-text: $kendo-color-success !default;
+/// Border color of the valid items.
+/// @group component
+$kendo-valid-border: $kendo-color-success !default;
+/// Shadow of the valid items.
+/// @group component
+$kendo-valid-shadow: null !default;
diff --git a/packages/classic/scss/core/color-system/index.import.scss b/packages/classic/scss/core/color-system/index.import.scss
deleted file mode 100644
index b274d39cbfa..00000000000
--- a/packages/classic/scss/core/color-system/index.import.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "@progress/kendo-theme-core/scss/color-system/index.import.scss";
diff --git a/packages/classic/scss/dataviz/_variables.scss b/packages/classic/scss/dataviz/_variables.scss
index 5bf71acc4ab..808cd20b9c0 100644
--- a/packages/classic/scss/dataviz/_variables.scss
+++ b/packages/classic/scss/dataviz/_variables.scss
@@ -5,51 +5,51 @@
 
 /// The first base series color and its light and dark shades.
 /// @group charts
-$kendo-series-a: #ff6358 !default;
-$kendo-series-a-dark: k-color-mix( black, $kendo-series-a, 25% ) !default;
-$kendo-series-a-darker: k-color-mix( black, $kendo-series-a, 50% ) !default;
-$kendo-series-a-light: k-color-mix( white, $kendo-series-a, 25% ) !default;
-$kendo-series-a-lighter: k-color-mix( white, $kendo-series-a, 50% ) !default;
+$kendo-series-a: if($kendo-enable-color-system, k-color( series-a ), #ff6358) !default;
+$kendo-series-a-dark: if($kendo-enable-color-system, k-color( series-a-bold ), k-color-mix(black, $kendo-series-a, 25%)) !default;
+$kendo-series-a-darker: if($kendo-enable-color-system, k-color( series-a-bolder ), k-color-mix(black, $kendo-series-a, 50%)) !default;
+$kendo-series-a-light: if($kendo-enable-color-system, k-color( series-a-subtle ), k-color-mix(white, $kendo-series-a, 25%)) !default;
+$kendo-series-a-lighter: if($kendo-enable-color-system, k-color( series-a-subtler ), k-color-mix(white, $kendo-series-a, 50%)) !default;
 
 /// The second base series color and its light and dark shades.
 /// @group charts
-$kendo-series-b: #ffd246 !default;
-$kendo-series-b-dark: k-color-mix( black, $kendo-series-b, 25% ) !default;
-$kendo-series-b-darker: k-color-mix( black, $kendo-series-b, 50% ) !default;
-$kendo-series-b-light: k-color-mix( white, $kendo-series-b, 25% ) !default;
-$kendo-series-b-lighter: k-color-mix( white, $kendo-series-b, 50% ) !default;
+$kendo-series-b: if($kendo-enable-color-system, k-color( series-b ), #ffd246) !default;
+$kendo-series-b-dark: if($kendo-enable-color-system, k-color( series-b-bold ), k-color-mix(black, $kendo-series-b, 25%)) !default;
+$kendo-series-b-darker: if($kendo-enable-color-system, k-color( series-b-bolder ), k-color-mix(black, $kendo-series-b, 50%)) !default;
+$kendo-series-b-light: if($kendo-enable-color-system, k-color( series-b-subtle ), k-color-mix(white, $kendo-series-b, 25%)) !default;
+$kendo-series-b-lighter: if($kendo-enable-color-system, k-color( series-b-subtler ), k-color-mix(white, $kendo-series-b, 50%)) !default;
 
 /// The third base series color and its light and dark shades.
 /// @group charts
-$kendo-series-c: #78d237 !default;
-$kendo-series-c-dark: k-color-mix( black, $kendo-series-c, 25% ) !default;
-$kendo-series-c-darker: k-color-mix( black, $kendo-series-c, 50% ) !default;
-$kendo-series-c-light: k-color-mix( white, $kendo-series-c, 25% ) !default;
-$kendo-series-c-lighter: k-color-mix( white, $kendo-series-c, 50% ) !default;
+$kendo-series-c: if($kendo-enable-color-system, k-color( series-c ), #78d237) !default;
+$kendo-series-c-dark: if($kendo-enable-color-system, k-color( series-c-bold ), k-color-mix(black, $kendo-series-c, 25%)) !default;
+$kendo-series-c-darker: if($kendo-enable-color-system, k-color( series-c-bolder ), k-color-mix(black, $kendo-series-c, 50%)) !default;
+$kendo-series-c-light: if($kendo-enable-color-system, k-color( series-c-subtle ), k-color-mix(white, $kendo-series-c, 25%)) !default;
+$kendo-series-c-lighter: if($kendo-enable-color-system, k-color( series-c-subtler ), k-color-mix(white, $kendo-series-c, 50%)) !default;
 
 /// The fourth base series color and its light and dark shades.
 /// @group charts
-$kendo-series-d: #28b4c8 !default;
-$kendo-series-d-dark: k-color-mix( black, $kendo-series-d, 25% ) !default;
-$kendo-series-d-darker: k-color-mix( black, $kendo-series-d, 50% ) !default;
-$kendo-series-d-light: k-color-mix( white, $kendo-series-d, 25% ) !default;
-$kendo-series-d-lighter: k-color-mix( white, $kendo-series-d, 50% ) !default;
+$kendo-series-d: if($kendo-enable-color-system, k-color( series-d ), #28b4c8) !default;
+$kendo-series-d-dark: if($kendo-enable-color-system, k-color( series-d-bold ), k-color-mix(black, $kendo-series-d, 25%)) !default;
+$kendo-series-d-darker: if($kendo-enable-color-system, k-color( series-d-bolder ), k-color-mix(black, $kendo-series-d, 50%)) !default;
+$kendo-series-d-light: if($kendo-enable-color-system, k-color( series-d-subtle ), k-color-mix(white, $kendo-series-d, 25%)) !default;
+$kendo-series-d-lighter: if($kendo-enable-color-system, k-color( series-d-subtler ), k-color-mix(white, $kendo-series-d, 50%)) !default;
 
 /// The fifth base series color and its light and dark shades.
 /// @group charts
-$kendo-series-e: #2d73f5 !default;
-$kendo-series-e-dark: k-color-mix( black, $kendo-series-e, 25% ) !default;
-$kendo-series-e-darker: k-color-mix( black, $kendo-series-e, 50% ) !default;
-$kendo-series-e-light: k-color-mix( white, $kendo-series-e, 25% ) !default;
-$kendo-series-e-lighter: k-color-mix( white, $kendo-series-e, 50% ) !default;
+$kendo-series-e: if($kendo-enable-color-system, k-color( series-e ), #2d73f5) !default;
+$kendo-series-e-dark: if($kendo-enable-color-system, k-color( series-e-bold ), k-color-mix(black, $kendo-series-e, 25%)) !default;
+$kendo-series-e-darker: if($kendo-enable-color-system, k-color( series-e-bolder ), k-color-mix(black, $kendo-series-e, 50%)) !default;
+$kendo-series-e-light: if($kendo-enable-color-system, k-color( series-e-subtle ), k-color-mix(white, $kendo-series-e, 25%)) !default;
+$kendo-series-e-lighter: if($kendo-enable-color-system, k-color( series-e-subtler ), k-color-mix(white, $kendo-series-e, 50%)) !default;
 
 /// The sixth base series color and its light and dark shades.
 /// @group charts
-$kendo-series-f: #aa46be !default;
-$kendo-series-f-dark: k-color-mix( black, $kendo-series-f, 25% ) !default;
-$kendo-series-f-darker: k-color-mix( black, $kendo-series-f, 50% ) !default;
-$kendo-series-f-light: k-color-mix( white, $kendo-series-f, 25% ) !default;
-$kendo-series-f-lighter: k-color-mix( white, $kendo-series-f, 50% ) !default;
+$kendo-series-f: if($kendo-enable-color-system, k-color( series-f ), #aa46be) !default;
+$kendo-series-f-dark: if($kendo-enable-color-system, k-color( series-f-bold ), k-color-mix(black, $kendo-series-f, 25%)) !default;
+$kendo-series-f-darker: if($kendo-enable-color-system, k-color( series-f-bolder ), k-color-mix(black, $kendo-series-f, 50%)) !default;
+$kendo-series-f-light: if($kendo-enable-color-system, k-color( series-f-subtle ), k-color-mix(white, $kendo-series-f, 25%)) !default;
+$kendo-series-f-lighter: if($kendo-enable-color-system, k-color( series-f-subtler ), k-color-mix(white, $kendo-series-f, 50%)) !default;
 
 /// The series colors in order:
 /// base, light, dark, lighter, darker
@@ -100,13 +100,13 @@ $kendo-chart-pane-title-font-weight: $kendo-font-weight-normal !default;
 
 /// The color of the Chart grid lines (major).
 /// @group charts
-$kendo-chart-major-lines: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 ) !default;
+$kendo-chart-major-lines: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .08 ) !default;
 
 /// The color of the Chart grid lines (minor).
 /// @group charts
-$kendo-chart-minor-lines: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .04 ) !default;
+$kendo-chart-minor-lines: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .04 ) !default;
 
-$kendo-chart-inactive: rgba( $kendo-body-text, .5 ) !default;
+$kendo-chart-inactive: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba( $kendo-body-text, .5 )) !default;
 $kendo-chart-area-opacity: .6 !default;
 $kendo-chart-area-inactive-opacity: .1 !default;
 $kendo-chart-line-inactive-opacity: .1 !default;
@@ -117,20 +117,20 @@ $kendo-chart-bg: $kendo-component-bg !default;
 $kendo-chart-text: $kendo-component-text !default;
 $kendo-chart-border: $kendo-component-border !default;
 
-$kendo-chart-crosshair-background: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 ) !default;
+$kendo-chart-crosshair-background: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .5 ) !default;
 $kendo-chart-crosshair-shared-tooltip-color: $kendo-chart-text !default;
-$kendo-chart-crosshair-shared-tooltip-background: k-try-shade( $kendo-chart-bg, 1 ) !default;
-$kendo-chart-crosshair-shared-tooltip-border: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08) !default;
+$kendo-chart-crosshair-shared-tooltip-background: if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-chart-bg, 1 )) !default;
+$kendo-chart-crosshair-shared-tooltip-border: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .08) !default;
 
-$kendo-chart-notes-background: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 ) !default;
-$kendo-chart-notes-border: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 ) !default;
-$kendo-chart-notes-lines: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 ) !default;
+$kendo-chart-notes-background: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .5 ) !default;
+$kendo-chart-notes-border: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .5 ) !default;
+$kendo-chart-notes-lines: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .5 ) !default;
 
-$kendo-chart-error-bars-background: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 ) !default;
+$kendo-chart-error-bars-background: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .5 ) !default;
 
 $kendo-chart-selection-handle-size: 22px !default;
-$kendo-chart-selection-border-color: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 ) !default;
-$kendo-chart-selection-shadow: inset 0 1px 7px rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .15) !default;
+$kendo-chart-selection-border-color: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .08 ) !default;
+$kendo-chart-selection-shadow: inset 0 1px 7px rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .15) !default;
 
 
 // TreeMap
diff --git a/packages/classic/scss/dock-manager/_variables.scss b/packages/classic/scss/dock-manager/_variables.scss
index 7d61d111870..2081b6a310f 100644
--- a/packages/classic/scss/dock-manager/_variables.scss
+++ b/packages/classic/scss/dock-manager/_variables.scss
@@ -107,7 +107,7 @@ $kendo-dock-manager-dock-preview-border-style: dashed !default;
 $kendo-dock-manager-dock-preview-border-radius: $kendo-border-radius-sm !default;
 /// The background color of the dropping area in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-dock-preview-bg: rgba( $kendo-color-primary, .16 ) !default;
+$kendo-dock-manager-dock-preview-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .16 ), rgba( $kendo-color-primary, .16 )) !default;
 /// The border color of the dropping area in the DockManager component.
 /// @group dock-manager
 $kendo-dock-manager-dock-preview-border: $kendo-color-primary !default;
diff --git a/packages/classic/scss/dropzone/_variables.scss b/packages/classic/scss/dropzone/_variables.scss
index 3802d2c1703..9bc730f302b 100644
--- a/packages/classic/scss/dropzone/_variables.scss
+++ b/packages/classic/scss/dropzone/_variables.scss
@@ -38,7 +38,7 @@ $kendo-dropzone-border: $kendo-base-border !default;
 $kendo-dropzone-icon-spacing: k-map-get( $kendo-spacing, 6 ) !default;
 /// The text color of the DropZone icon.
 /// @group dropzone
-$kendo-dropzone-icon-text: k-try-tint( $kendo-dropzone-text, 4 ) !default;
+$kendo-dropzone-icon-text: if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-dropzone-text, 4 )) !default;
 /// The text color of the hovered DropZone icon.
 /// @group dropzone
 $kendo-dropzone-icon-hover-text: $kendo-color-primary !default;
diff --git a/packages/classic/scss/editor/_variables.scss b/packages/classic/scss/editor/_variables.scss
index 97481683acb..4a0eadec9d7 100644
--- a/packages/classic/scss/editor/_variables.scss
+++ b/packages/classic/scss/editor/_variables.scss
@@ -29,7 +29,7 @@ $kendo-editor-selected-bg: $kendo-color-primary !default;
 
 /// The highlighted background color of the Editor.
 /// @group editor
-$kendo-editor-highlighted-bg: k-color-mix( $kendo-color-primary, #ffffff, 20% ) !default;
+$kendo-editor-highlighted-bg: if($kendo-enable-color-system, k-color( primary-subtle ), k-color-mix( $kendo-color-primary, #ffffff, 20% )) !default;
 
 /// The horizontal margin of the Editor's export tool icon.
 /// @group editor
diff --git a/packages/classic/scss/expansion-panel/_variables.scss b/packages/classic/scss/expansion-panel/_variables.scss
index 49bf6f96063..f22ae8d3716 100644
--- a/packages/classic/scss/expansion-panel/_variables.scss
+++ b/packages/classic/scss/expansion-panel/_variables.scss
@@ -47,10 +47,9 @@ $kendo-expander-header-bg: transparent !default;
 /// The border color of the ExpansionPanel header.
 /// @group expander
 $kendo-expander-header-border: null !default;
-
 /// The background color of the hovered ExpansionPanel header.
 /// @group expander
-$kendo-expander-header-hover-bg: k-color-shade( $kendo-expander-bg, 1 ) !default;
+$kendo-expander-header-hover-bg: if($kendo-enable-color-system, k-color( base-subtle-hover ), k-color-shade( $kendo-expander-bg, 1 )) !default;
 /// The background color of the focused ExpansionPanel header.
 /// @group expander
 $kendo-expander-header-focus-bg: null !default;
diff --git a/packages/classic/scss/filemanager/_variables.scss b/packages/classic/scss/filemanager/_variables.scss
index d128cf9eb8c..662d7367c34 100644
--- a/packages/classic/scss/filemanager/_variables.scss
+++ b/packages/classic/scss/filemanager/_variables.scss
@@ -119,7 +119,7 @@ $kendo-file-manager-listview-item-border: null !default;
 $kendo-file-manager-listview-item-icon-bg: null !default;
 /// The text color of the FileManager ListView item icon.
 /// @group filemanager
-$kendo-file-manager-listview-item-icon-text: k-try-tint($kendo-file-manager-text, 4) !default;
+$kendo-file-manager-listview-item-icon-text: if($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4)) !default;
 /// The border color of the FileManager ListView item icon.
 /// @group filemanager
 $kendo-file-manager-listview-item-icon-border: null !default;
@@ -176,7 +176,7 @@ $kendo-file-manager-preview-border: null !default;
 $kendo-file-manager-preview-icon-bg: null !default;
 /// The text color of the FileManager preview icon.
 /// @group filemanager
-$kendo-file-manager-preview-icon-text: k-try-tint($kendo-file-manager-text, 4) !default;
+$kendo-file-manager-preview-icon-text: if($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4)) !default;
 /// The border color of the FileManager preview icon.
 /// @group filemanager
 $kendo-file-manager-preview-icon-border: null !default;
diff --git a/packages/classic/scss/forms/_variables.scss b/packages/classic/scss/forms/_variables.scss
index 6ba55a94ac3..a6f86d30084 100644
--- a/packages/classic/scss/forms/_variables.scss
+++ b/packages/classic/scss/forms/_variables.scss
@@ -151,7 +151,7 @@ $kendo-fieldset-border: null !default;
 $kendo-fieldset-legend-bg: null !default;
 /// The text color of the Form legend.
 /// @group form
-$kendo-fieldset-legend-text: k-try-shade( $kendo-body-text, 2 ) !default;
+$kendo-fieldset-legend-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-try-shade( $kendo-body-text, 2 )) !default;
 /// The border color of the Form legend.
 /// @group form
 $kendo-fieldset-legend-border: null !default;
diff --git a/packages/classic/scss/gantt/_variables.scss b/packages/classic/scss/gantt/_variables.scss
index 80b96dc8c5c..304f8832a91 100644
--- a/packages/classic/scss/gantt/_variables.scss
+++ b/packages/classic/scss/gantt/_variables.scss
@@ -12,12 +12,12 @@ $kendo-gantt-treelist-bg: null !default;
 $kendo-gantt-treelist-text: null !default;
 $kendo-gantt-treelist-border: null !default;
 
-$kendo-gantt-nonwork-bg: rgba( k-contrast-color( $kendo-gantt-bg ), .025 ) !default;
+$kendo-gantt-nonwork-bg: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .03 ), rgba( k-contrast-color( $kendo-gantt-bg ), .025 )) !default;
 $kendo-gantt-nonwork-text: null !default;
 $kendo-gantt-nonwork-border: null !default;
 
 $kendo-gantt-line-size: 2px !default;
-$kendo-gantt-line-fill: k-contrast-color( $kendo-gantt-bg ) !default;
+$kendo-gantt-line-fill: if($kendo-enable-color-system, k-color( on-base ), k-contrast-color( $kendo-gantt-bg )) !default;
 $kendo-gantt-line-selected-fill: $kendo-color-primary !default;
 
 $kendo-gantt-dot-size: 8px !default;
@@ -32,19 +32,19 @@ $kendo-gantt-milestone-border: $kendo-gantt-border !default;
 $kendo-gantt-milestone-selected-bg: $kendo-selected-bg !default;
 $kendo-gantt-milestone-selected-border: $kendo-selected-border !default;
 
-$kendo-gantt-summary-bg: k-try-tint( $kendo-gantt-text, 1 ) !default;
-$kendo-gantt-summary-progress-bg: k-try-shade( $kendo-gantt-text, 5 ) !default;
-$kendo-gantt-summary-selected-bg: k-try-tint( $kendo-selected-bg, 6 ) !default;
+$kendo-gantt-summary-bg: if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-gantt-text, 1 )) !default;
+$kendo-gantt-summary-progress-bg: if($kendo-enable-color-system, k-color( on-base ), k-try-shade( $kendo-gantt-text, 5 )) !default;
+$kendo-gantt-summary-selected-bg: if($kendo-enable-color-system, k-color( primary-subtle-active ), k-try-tint( $kendo-selected-bg, 6 )) !default;
 $kendo-gantt-summary-progress-selected-bg: $kendo-selected-bg !default;
 
 $kendo-gantt-task-border-width: 0px !default;
 $kendo-gantt-task-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
 $kendo-gantt-task-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
-$kendo-gantt-task-bg: k-try-tint( $kendo-gantt-text, 2 ) !default;
-$kendo-gantt-task-text: k-contrast-color( $kendo-gantt-text ) !default;
+$kendo-gantt-task-bg: if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-gantt-text, 2 )) !default;
+$kendo-gantt-task-text: if($kendo-enable-color-system, k-color( base-subtle ), k-contrast-color( $kendo-gantt-text )) !default;
 $kendo-gantt-task-border: null !default;
 $kendo-gantt-task-progress-bg: $kendo-gantt-text !default;
-$kendo-gantt-task-selected-bg: k-try-tint( $kendo-selected-bg, 6 ) !default;
+$kendo-gantt-task-selected-bg: if($kendo-enable-color-system, k-color( primary-subtle-active ), k-try-tint( $kendo-selected-bg, 6 )) !default;
 $kendo-gantt-task-selected-text: $kendo-selected-text !default;
 $kendo-gantt-task-selected-border: null !default;
 $kendo-gantt-task-progress-selected-bg: $kendo-selected-bg !default;
@@ -78,10 +78,10 @@ $kendo-gantt-planned-bg: $kendo-color-primary !default;
 $kendo-gantt-planned-border: $kendo-gantt-planned-bg !default;
 
 $kendo-gantt-delayed-bg: $kendo-color-error !default;
-$kendo-gantt-delayed-bg-lighter: k-color-tint($kendo-gantt-delayed-bg, 5) !default;
+$kendo-gantt-delayed-bg-lighter: if($kendo-enable-color-system, k-color( error-emphasis ), k-color-tint($kendo-gantt-delayed-bg, 5)) !default;
 
 $kendo-gantt-advanced-bg: $kendo-color-success !default;
-$kendo-gantt-advanced-bg-lighter: k-color-tint($kendo-gantt-advanced-bg, 5) !default;
+$kendo-gantt-advanced-bg-lighter: if($kendo-enable-color-system, k-color( success-emphasis ), k-color-tint($kendo-gantt-advanced-bg, 5)) !default;
 
 $kendo-gantt-action-on-offset-text: #000000 !default;
 $kendo-gantt-offset-resize-handler-top: 50% !default;
diff --git a/packages/classic/scss/grid/_variables.scss b/packages/classic/scss/grid/_variables.scss
index 5a44fc868cd..a1ea9852019 100644
--- a/packages/classic/scss/grid/_variables.scss
+++ b/packages/classic/scss/grid/_variables.scss
@@ -227,14 +227,14 @@ $kendo-grid-selection-aggregates-line-height: $kendo-grid-line-height !default;
 $kendo-grid-selection-aggregates-font-weight: $kendo-font-weight-bold !default;
 
 $kendo-grid-sorted-icon-spacing: calc( #{$kendo-padding-md-x} - 1px ) !default;
-$kendo-grid-sorted-bg: rgba( k-contrast-color( $kendo-grid-bg ), .02 ) !default;
+$kendo-grid-sorted-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .03 ), rgba( k-contrast-color( $kendo-grid-bg ), .02 )) !default;
 $kendo-grid-sorting-indicator-text: $kendo-color-primary !default;
 $kendo-grid-sorting-index-font-size: $kendo-font-size-sm !default;
 $kendo-grid-sorting-index-height: $kendo-icon-size !default;
 $kendo-grid-sorting-index-spacing-y: k-math-div( $kendo-icon-spacing, 2 ) !default;
 $kendo-grid-sorting-index-spacing-x: -$kendo-grid-sorting-index-spacing-y !default;
 
-$kendo-grid-grouping-row-bg: k-try-shade( $kendo-grid-bg, 1 ) !default;
+$kendo-grid-grouping-row-bg: if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-grid-bg, 1 )) !default;
 $kendo-grid-grouping-row-text: $kendo-grid-text !default;
 
 $kendo-grid-focus-shadow: $kendo-table-focus-shadow !default;
@@ -243,11 +243,13 @@ $kendo-grid-command-cell-button-spacing: k-map-get( $kendo-spacing, 2 ) !default
 // be cautious when changing the next line; see https://github.com/MoOx/reduce-css-calc/issues/38
 $kendo-grid-command-cell-padding-y: calc( #{$kendo-grid-cell-padding-y} - (#{$kendo-button-calc-size} - #{$kendo-line-height-em}) / 2 ) !default;
 
+// Must be a solid color
 $kendo-grid-sticky-bg: $kendo-grid-bg !default;
 $kendo-grid-sticky-text: $kendo-grid-text !default;
 $kendo-grid-sticky-border: $kendo-grid-border !default;
 
-$kendo-grid-sticky-alt-bg: $kendo-grid-alt-bg !default;
+// Must be a solid color
+$kendo-grid-sticky-alt-bg: if($kendo-enable-color-system, k-color( base-subtle ), $kendo-grid-alt-bg) !default;
 
 $kendo-grid-sticky-header-bg: $kendo-grid-header-bg !default;
 $kendo-grid-sticky-header-text: $kendo-grid-header-text !default;
@@ -256,11 +258,12 @@ $kendo-grid-sticky-header-border: $kendo-grid-sticky-border !default;
 $kendo-grid-sticky-footer-bg: $kendo-grid-header-bg !default;
 $kendo-grid-sticky-footer-hover-bg: $kendo-grid-hover-bg !default;
 
-$kendo-grid-sticky-selected-bg: k-color-mix($kendo-selected-bg, #ffffff, 25%) !default;
-$kendo-grid-sticky-selected-alt-bg: k-try-shade( $kendo-grid-sticky-selected-bg, .5 ) !default;
+$kendo-grid-sticky-selected-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), k-color-mix($kendo-selected-bg, #ffffff, 25%)) !default;
+$kendo-grid-sticky-selected-alt-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), k-try-shade( $kendo-grid-sticky-selected-bg, .5 )) !default;
 
-$kendo-grid-sticky-hover-bg: $kendo-grid-hover-bg !default;
-$kendo-grid-sticky-selected-hover-bg: k-try-shade( $kendo-grid-sticky-selected-bg, 1 ) !default;
+// Must be a solid color
+$kendo-grid-sticky-hover-bg: if($kendo-enable-color-system, k-color( base-subtle-hover ), $kendo-grid-hover-bg) !default;
+$kendo-grid-sticky-selected-hover-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), k-try-shade( $kendo-grid-sticky-selected-bg, 1 )) !default;
 
 $kendo-grid-column-menu-width: 230px !default;
 $kendo-grid-column-menu-max-width: 320px !default;
@@ -311,7 +314,7 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
 
 /// Background color of the grid row resize indicator
 /// @group grid
-$kendo-grid-row-resizer-hover-bg: rgba( k-contrast-color( $kendo-grid-bg ), .12 ) !default;
+$kendo-grid-row-resizer-hover-bg: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .2 ), rgba( k-contrast-color( $kendo-grid-bg ), .12 )) !default;
 /// Active background color of the grid row resize indicator
 /// @group grid
 $kendo-grid-row-resizer-active-bg: $kendo-color-primary !default;
diff --git a/packages/classic/scss/input/_variables.scss b/packages/classic/scss/input/_variables.scss
index 5236df7f7bd..c4c5861dd5c 100644
--- a/packages/classic/scss/input/_variables.scss
+++ b/packages/classic/scss/input/_variables.scss
@@ -168,7 +168,7 @@ $kendo-input-outline-bg: null !default;
 $kendo-input-outline-text: null !default;
 /// The border color of the outline Input components.
 /// @group input
-$kendo-input-outline-border: rgba( $kendo-button-text, .5) !default;
+$kendo-input-outline-border: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba( $kendo-button-text, .5)) !default;
 
 /// The background color of the outline hovered Input components.
 /// @group input
@@ -178,7 +178,7 @@ $kendo-input-outline-hover-bg: null !default;
 $kendo-input-outline-hover-text: null !default;
 /// The border color of the outline hovered Input components.
 /// @group input
-$kendo-input-outline-hover-border: rgba( $kendo-button-text, .8) !default;
+$kendo-input-outline-hover-border: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .8 ), rgba( $kendo-button-text, .8)) !default;
 
 /// The background color of the outline focused Input components.
 /// @group input
@@ -369,14 +369,14 @@ $kendo-picker-outline-bg: null !default;
 $kendo-picker-outline-text: $kendo-button-text !default;
 /// The border color of the outline Picker components.
 /// @group picker
-$kendo-picker-outline-border: rgba( $kendo-picker-outline-text, .5) !default;
+$kendo-picker-outline-border: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba( $kendo-picker-outline-text, .5)) !default;
 
 /// The background color of the outline hovered Picker components.
 /// @group picker
 $kendo-picker-outline-hover-bg: $kendo-picker-outline-text !default;
 /// The text color of the outline hovered Picker components.
 /// @group picker
-$kendo-picker-outline-hover-text: k-contrast-color( $kendo-picker-outline-hover-bg ) !default;
+$kendo-picker-outline-hover-text: if($kendo-enable-color-system, k-color( base-subtle ), k-contrast-color( $kendo-picker-outline-hover-bg )) !default;
 /// The border color of the outline hovered Picker components.
 /// @group picker
 $kendo-picker-outline-hover-border: $kendo-picker-outline-hover-bg !default;
@@ -416,13 +416,13 @@ $kendo-picker-flat-border: $kendo-button-border !default;
 
 /// The background color of the flat hovered Picker components.
 /// @group picker
-$kendo-picker-flat-hover-bg: rgba( $kendo-button-text, .04 ) !default;
+$kendo-picker-flat-hover-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .04 ), rgba( $kendo-button-text, .04 )) !default;
 /// The text color of the flat hovered Picker components.
 /// @group picker
 $kendo-picker-flat-hover-text: null !default;
 /// The border color of the flat hovered Picker components.
 /// @group picker
-$kendo-picker-flat-hover-border: rgba( $kendo-button-border, .16 ) !default;
+$kendo-picker-flat-hover-border: if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), rgba( $kendo-button-border, .16 )) !default;
 
 /// The background color of the flat focused Picker components.
 /// @group picker
diff --git a/packages/classic/scss/listview/_variables.scss b/packages/classic/scss/listview/_variables.scss
index 28489443a80..fb74ec36156 100644
--- a/packages/classic/scss/listview/_variables.scss
+++ b/packages/classic/scss/listview/_variables.scss
@@ -41,7 +41,7 @@ $kendo-listview-item-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
 $kendo-listview-item-selected-text: null !default;
 /// The background color of the selected ListView items.
 /// @group listview
-$kendo-listview-item-selected-bg: rgba( $kendo-selected-bg, .25 ) !default;
+$kendo-listview-item-selected-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-selected-bg, .25 )) !default;
 /// The border color of the selected ListView items.
 /// @group listview
 $kendo-listview-item-selected-border: null !default;
diff --git a/packages/classic/scss/map/_variables.scss b/packages/classic/scss/map/_variables.scss
index 732ebaa6c74..5181047a765 100644
--- a/packages/classic/scss/map/_variables.scss
+++ b/packages/classic/scss/map/_variables.scss
@@ -25,6 +25,6 @@ $kendo-map-zoom-control-button-padding-y: $kendo-map-zoom-control-button-padding
 $kendo-map-attribution-padding-x: $kendo-padding-sm-x !default;
 $kendo-map-attribution-padding-y: $kendo-padding-sm-y !default;
 $kendo-map-attribution-font-size: ($kendo-map-font-size * .75) !default;
-$kendo-map-attribution-bg: rgba( $kendo-map-bg, .8 ) !default;
+$kendo-map-attribution-bg: if($kendo-enable-color-system, rgba( k-color( app-surface, true ), .8 ), rgba( $kendo-map-bg, .8 )) !default;
 
 $kendo-map-marker-fill: $kendo-color-primary !default;
diff --git a/packages/classic/scss/mediaplayer/_variables.scss b/packages/classic/scss/mediaplayer/_variables.scss
index 26d443547d9..6071cf310d5 100644
--- a/packages/classic/scss/mediaplayer/_variables.scss
+++ b/packages/classic/scss/mediaplayer/_variables.scss
@@ -13,4 +13,4 @@ $kendo-media-player-titlebar-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
 $kendo-media-player-titlebar-bg: null !default;
 $kendo-media-player-titlebar-text: $kendo-media-player-bg !default;
 $kendo-media-player-titlebar-border: null !default;
-$kendo-media-player-titlebar-gradient: rgba( $kendo-media-player-text, .7 ), rgba( $kendo-media-player-text, 0 ) !default;
+$kendo-media-player-titlebar-gradient: if($kendo-enable-color-system, ( rgba( k-color( on-app-surface, true ), .7 ), rgba( k-color( on-app-surface, true ), 0 ) ), ( rgba( $kendo-media-player-text, .7 ), rgba( $kendo-media-player-text, 0 ) )) !default;
diff --git a/packages/classic/scss/menu/_variables.scss b/packages/classic/scss/menu/_variables.scss
index a38d1a049e5..076fcec89db 100644
--- a/packages/classic/scss/menu/_variables.scss
+++ b/packages/classic/scss/menu/_variables.scss
@@ -32,7 +32,7 @@ $kendo-menu-item-expanded-text: $kendo-component-text !default;
 $kendo-menu-item-expanded-border: null !default;
 $kendo-menu-item-expanded-gradient: null !default;
 
-$kendo-menu-item-focus-shadow: inset 0 0 3px 1px rgba( $kendo-menu-text, .25 ) !default;
+$kendo-menu-item-focus-shadow: inset 0 0 3px 1px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .25 ), rgba( $kendo-menu-text, .25 )) !default;
 
 $kendo-menu-separator-spacing: k-map-get( $kendo-spacing, 1 ) !default;
 
diff --git a/packages/classic/scss/notification/_variables.scss b/packages/classic/scss/notification/_variables.scss
index a8184da7423..0cc5971689a 100644
--- a/packages/classic/scss/notification/_variables.scss
+++ b/packages/classic/scss/notification/_variables.scss
@@ -48,7 +48,7 @@ $kendo-notification-icon-spacing: $kendo-icon-spacing !default;
 
     @each $name, $color in $colors {
         $_theme: k-map-merge(( $name: (
-            color: k-contrast-legacy( $color ),
+            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )),
             background-color: $color,
             border: $color,
         )), $_theme );
diff --git a/packages/classic/scss/panelbar/_variables.scss b/packages/classic/scss/panelbar/_variables.scss
index 4f4ab18a96a..1f56048c482 100644
--- a/packages/classic/scss/panelbar/_variables.scss
+++ b/packages/classic/scss/panelbar/_variables.scss
@@ -47,7 +47,7 @@ $kendo-panelbar-header-selected-text: $kendo-selected-text !default;
 $kendo-panelbar-header-selected-border: $kendo-selected-border !default;
 $kendo-panelbar-header-selected-gradient: null !default;
 
-$kendo-panelbar-header-selected-hover-bg: k-try-shade( $kendo-panelbar-header-selected-bg ) !default;
+$kendo-panelbar-header-selected-hover-bg: if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-panelbar-header-selected-bg )) !default;
 $kendo-panelbar-header-selected-hover-text: null !default;
 $kendo-panelbar-header-selected-hover-border: null !default;
 $kendo-panelbar-header-selected-hover-gradient: null !default;
@@ -62,8 +62,7 @@ $kendo-panelbar-header-selected-hover-focus-text: null !default;
 $kendo-panelbar-header-selected-hover-focus-border: null !default;
 $kendo-panelbar-header-selected-hover-focus-gradient: null !default;
 
-
-$kendo-panelbar-item-hover-bg: k-try-shade( $kendo-panelbar-bg, .5 ) !default;
+$kendo-panelbar-item-hover-bg: if($kendo-enable-color-system, k-color( base-subtle-hover ), k-try-shade( $kendo-panelbar-bg, .5 )) !default;
 $kendo-panelbar-item-hover-text: null !default;
 $kendo-panelbar-item-hover-border: null !default;
 $kendo-panelbar-item-hover-gradient: null !default;
@@ -84,7 +83,7 @@ $kendo-panelbar-item-selected-text: $kendo-selected-text !default;
 $kendo-panelbar-item-selected-border: null !default;
 $kendo-panelbar-item-selected-gradient: null !default;
 
-$kendo-panelbar-item-selected-hover-bg: k-try-shade( $kendo-panelbar-item-selected-bg ) !default;
+$kendo-panelbar-item-selected-hover-bg: if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-panelbar-item-selected-bg )) !default;
 $kendo-panelbar-item-selected-hover-text: null !default;
 $kendo-panelbar-item-selected-hover-border: null !default;
 $kendo-panelbar-item-selected-hover-gradient: null !default;
diff --git a/packages/classic/scss/pivotgrid/_variables.scss b/packages/classic/scss/pivotgrid/_variables.scss
index 6b801e25c3f..f0b2fa20019 100644
--- a/packages/classic/scss/pivotgrid/_variables.scss
+++ b/packages/classic/scss/pivotgrid/_variables.scss
@@ -22,21 +22,21 @@ $kendo-pivotgrid-bg: $kendo-component-bg !default;
 $kendo-pivotgrid-text: $kendo-component-text !default;
 $kendo-pivotgrid-border: $kendo-component-border !default;
 
-$kendo-pivotgrid-alt-border: k-try-shade( $kendo-pivotgrid-border, 2 ) !default;
+$kendo-pivotgrid-alt-border: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-pivotgrid-border, 2 )) !default;
 
 $kendo-pivotgrid-headers-bg: $kendo-component-header-bg !default;
 $kendo-pivotgrid-headers-text: $kendo-component-header-text !default;
 $kendo-pivotgrid-headers-border: $kendo-component-header-border !default;
 
-$kendo-pivotgrid-total-bg: k-try-shade( $kendo-pivotgrid-bg, 1 ) !default;
+$kendo-pivotgrid-total-bg: if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-pivotgrid-bg, 1 )) !default;
 $kendo-pivotgrid-total-text: $kendo-component-header-text !default;
 $kendo-pivotgrid-total-border: $kendo-component-header-border !default;
 
-$kendo-pivotgrid-hover-bg: k-color-darken( $kendo-pivotgrid-bg, 7% ) !default;
+$kendo-pivotgrid-hover-bg: if($kendo-enable-color-system, k-color( base-subtle-hover ), k-color-darken( $kendo-pivotgrid-bg, 7% )) !default;
 $kendo-pivotgrid-hover-text: null !default;
 $kendo-pivotgrid-hover-border: null !default;
 
-$kendo-pivotgrid-selected-bg: rgba( $kendo-selected-bg, .25 ) !default;
+$kendo-pivotgrid-selected-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-selected-bg, .25 )) !default;
 $kendo-pivotgrid-selected-text: null !default;
 $kendo-pivotgrid-selected-border: null !default;
 
@@ -105,7 +105,7 @@ $kendo-pivotgrid-alt-text: $kendo-grid-header-text !default;
 $kendo-pivotgrid-chrome-border: $kendo-grid-border !default;
 
 $kendo-pivotgrid-container-bg: $kendo-component-bg !default;
-$kendo-pivotgrid-row-headers-bg: k-try-shade( $kendo-component-bg, 2 ) !default;
+$kendo-pivotgrid-row-headers-bg: if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-component-bg, 2 )) !default;
 
 $kendo-pivotgrid-button-bg: null !default;
 $kendo-pivotgrid-button-text: null !default;
diff --git a/packages/classic/scss/progressbar/_variables.scss b/packages/classic/scss/progressbar/_variables.scss
index 1e961035545..e3eaa00f10f 100644
--- a/packages/classic/scss/progressbar/_variables.scss
+++ b/packages/classic/scss/progressbar/_variables.scss
@@ -24,7 +24,7 @@ $kendo-progressbar-line-height: 1 !default;
 
 /// The background color of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-bg: k-try-shade( $kendo-component-bg, 1 ) !default;
+$kendo-progressbar-bg: if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-component-bg, 1 )) !default;
 /// The text color of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-text: $kendo-component-text !default;
@@ -40,10 +40,10 @@ $kendo-progressbar-gradient: null !default;
 $kendo-progressbar-value-bg: $kendo-color-primary !default;
 /// The progress text color of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-value-text: k-contrast-legacy( $kendo-progressbar-value-bg ) !default;
+$kendo-progressbar-value-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-progressbar-value-bg )) !default;
 /// The progress border color of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-value-border: k-try-shade( $kendo-progressbar-value-bg ) !default;
+$kendo-progressbar-value-border: if($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-progressbar-value-bg )) !default;
 /// The progress background gradient of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-value-gradient: null !default;
diff --git a/packages/classic/scss/scheduler/_variables.scss b/packages/classic/scss/scheduler/_variables.scss
index 15fbc12d463..c27fc155321 100644
--- a/packages/classic/scss/scheduler/_variables.scss
+++ b/packages/classic/scss/scheduler/_variables.scss
@@ -22,7 +22,7 @@ $kendo-scheduler-event-min-height: 25px !default;
 $kendo-scheduler-event-border-radius: $kendo-border-radius-md !default;
 $kendo-scheduler-event-line-height: calc( #{$kendo-scheduler-event-min-height} - (2 * #{$kendo-padding-md-y}) ) !default;
 
-$kendo-scheduler-event-bg: k-color-tint( $kendo-selected-bg, 2 ) !default;
+$kendo-scheduler-event-bg: if($kendo-enable-color-system, k-color( primary ), k-color-tint( $kendo-selected-bg, 2 )) !default;
 $kendo-scheduler-event-text: $kendo-selected-text !default;
 $kendo-scheduler-event-border: null !default;
 $kendo-scheduler-event-gradient: null !default;
@@ -48,13 +48,13 @@ $kendo-scheduler-cell-height: $kendo-line-height-em !default;
 $kendo-scheduler-datecolumn-width: 12em !default;
 $kendo-scheduler-timecolumn-width: 11em !default;
 
-$kendo-scheduler-nonwork-bg: k-try-shade( $kendo-scheduler-bg, .5 ) !default;
+$kendo-scheduler-nonwork-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-scheduler-bg, .5 )) !default;
 $kendo-scheduler-nonwork-text: null !default;
 
 $kendo-scheduler-weekend-bg: null !default;
 $kendo-scheduler-weekend-text: null !default;
 
-$kendo-scheduler-othermonth-bg: k-try-shade( $kendo-scheduler-bg, .5 ) !default;
+$kendo-scheduler-othermonth-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-scheduler-bg, .5 )) !default;
 $kendo-scheduler-othermonth-text: null !default;
 
 $kendo-scheduler-yearview-padding-x: k-map-get( $kendo-spacing, 3 ) !default;
diff --git a/packages/classic/scss/scrollview/_variables.scss b/packages/classic/scss/scrollview/_variables.scss
index bc21d66b3a1..30514c1e4ef 100644
--- a/packages/classic/scss/scrollview/_variables.scss
+++ b/packages/classic/scss/scrollview/_variables.scss
@@ -37,7 +37,7 @@ $kendo-scrollview-pagebutton-border: $kendo-button-border !default;
 $kendo-scrollview-pagebutton-primary-bg: $kendo-color-primary !default;
 /// The primary border color of the ScrollView page button.
 /// @group scrollview
-$kendo-scrollview-pagebutton-primary-border: k-try-shade( $kendo-color-primary, 2 ) !default;
+$kendo-scrollview-pagebutton-primary-border: if($kendo-enable-color-system, k-color( primary ), k-try-shade( $kendo-color-primary, 2 )) !default;
 /// The box shadow of the ScrollView page button.
 /// @group scrollview
 $kendo-scrollview-pagebutton-shadow: 0 0 0 2px rgba( black, .13 ) !default;
diff --git a/packages/classic/scss/signature/_variables.scss b/packages/classic/scss/signature/_variables.scss
index 83345893fd4..069566c3f01 100644
--- a/packages/classic/scss/signature/_variables.scss
+++ b/packages/classic/scss/signature/_variables.scss
@@ -18,7 +18,7 @@ $kendo-signature-lg-padding-y: $kendo-signature-lg-padding-x !default;
 
 $kendo-signature-line-width: 1px !default;
 $kendo-signature-line-style: dashed !default;
-$kendo-signature-line-color: rgba( $kendo-color-info, .24 ) !default;
+$kendo-signature-line-color: if($kendo-enable-color-system, rgba( k-color( info, true ), .24 ), rgba( $kendo-color-info, .24 )) !default;
 
 $kendo-signature-line-size: calc( 100% - 2 * #{$kendo-signature-padding-x} ) !default;
 $kendo-signature-sm-line-size: calc( 100% - 2 * #{$kendo-signature-sm-padding-x} ) !default;
diff --git a/packages/classic/scss/skeleton/_variables.scss b/packages/classic/scss/skeleton/_variables.scss
index 506a97288c6..0212a423bd5 100644
--- a/packages/classic/scss/skeleton/_variables.scss
+++ b/packages/classic/scss/skeleton/_variables.scss
@@ -17,7 +17,7 @@ $kendo-skeleton-circle-border-radius: 9999px !default;
 
 /// The background color of the Skeleton item.
 /// @group skeleton
-$kendo-skeleton-item-bg: rgba( $kendo-color-inverse, .2 ) !default;
+$kendo-skeleton-item-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .2 ), rgba( $kendo-color-inverse, .2 )) !default;
 /// The background color of the Skeleton wave animation.
 /// @group skeleton
 $kendo-skeleton-wave-bg: rgba( black, .04 ) !default;
diff --git a/packages/classic/scss/slider/_variables.scss b/packages/classic/scss/slider/_variables.scss
index 22deb4ed2d6..58527039764 100644
--- a/packages/classic/scss/slider/_variables.scss
+++ b/packages/classic/scss/slider/_variables.scss
@@ -23,27 +23,27 @@ $kendo-slider-draghandle-active-scale: 1 !default;
 $kendo-slider-draghandle-active-size: null !default;
 
 $kendo-slider-draghandle-bg: $kendo-color-primary !default;
-$kendo-slider-draghandle-text: k-contrast-legacy( $kendo-color-primary ) !default;
-$kendo-slider-draghandle-border: k-try-shade( $kendo-color-primary, 2 ) !default;
+$kendo-slider-draghandle-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-color-primary )) !default;
+$kendo-slider-draghandle-border: if($kendo-enable-color-system, k-color( primary ), k-try-shade( $kendo-color-primary, 2 )) !default;
 $kendo-slider-draghandle-gradient: null !default;
 
-$kendo-slider-draghandle-hover-bg: k-try-shade( $kendo-color-primary, 1 ) !default;
+$kendo-slider-draghandle-hover-bg: if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-color-primary, 1 )) !default;
 $kendo-slider-draghandle-hover-text: null !default;
-$kendo-slider-draghandle-hover-border: k-try-shade( $kendo-slider-draghandle-hover-bg, 2 ) !default;
+$kendo-slider-draghandle-hover-border: if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-slider-draghandle-hover-bg, 2 )) !default;
 $kendo-slider-draghandle-hover-gradient: null !default;
 
-$kendo-slider-draghandle-pressed-bg: k-try-shade( $kendo-color-primary, 2 ) !default;
+$kendo-slider-draghandle-pressed-bg: if($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-color-primary, 2 )) !default;
 $kendo-slider-draghandle-pressed-text: null !default;
-$kendo-slider-draghandle-pressed-border: k-try-shade( $kendo-slider-draghandle-pressed-bg, 2 ) !default;
+$kendo-slider-draghandle-pressed-border: if($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-slider-draghandle-pressed-bg, 2 )) !default;
 $kendo-slider-draghandle-pressed-gradient: null !default;
 
-$kendo-slider-draghandle-focus-shadow: 0 0 4px 0 rgba( $kendo-slider-draghandle-border, .75 ) !default;
+$kendo-slider-draghandle-focus-shadow: 0 0 4px 0 if($kendo-enable-color-system, rgba( k-color( primary, true ), .75 ), rgba( $kendo-slider-draghandle-border, .75 )) !default;
 
 $kendo-slider-transition-speed: .3s !default;
 $kendo-slider-transition-function: ease-out !default;
 $kendo-slider-draghandle-transition-speed: .4s !default;
 $kendo-slider-draghandle-transition-function: cubic-bezier(.25, .8, .25, 1) !default;
 
-$kendo-slider-track-bg: k-try-shade( $kendo-component-bg, 1 ) !default;
+$kendo-slider-track-bg: if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-component-bg, 1 )) !default;
 $kendo-slider-selection-bg: $kendo-color-primary !default;
 $kendo-slider-disabled-opacity: null !default;
diff --git a/packages/classic/scss/splitter/_variables.scss b/packages/classic/scss/splitter/_variables.scss
index 8ed04bd39e2..5d0bc950e2c 100644
--- a/packages/classic/scss/splitter/_variables.scss
+++ b/packages/classic/scss/splitter/_variables.scss
@@ -18,7 +18,7 @@ $kendo-splitter-collapse-icon-padding-y: k-map-get( $kendo-spacing, .5 ) !defaul
 $kendo-splitbar-bg: $kendo-base-bg !default;
 $kendo-splitbar-text: $kendo-base-text !default;
 
-$kendo-splitbar-hover-bg: k-try-shade( $kendo-splitbar-bg, .5 ) !default;
+$kendo-splitbar-hover-bg: if($kendo-enable-color-system, k-color( base-subtle-hover ), k-try-shade( $kendo-splitbar-bg, .5 )) !default;
 $kendo-splitbar-hover-text: $kendo-splitbar-text !default;
 
 $kendo-splitbar-selected-bg: $kendo-selected-bg !default;
diff --git a/packages/classic/scss/spreadsheet/_variables.scss b/packages/classic/scss/spreadsheet/_variables.scss
index 76370a6b869..cef9f1b467d 100644
--- a/packages/classic/scss/spreadsheet/_variables.scss
+++ b/packages/classic/scss/spreadsheet/_variables.scss
@@ -37,7 +37,7 @@ $kendo-spreadsheet-formula-input-line-height: $kendo-input-line-height !default;
 $kendo-spreadsheet-view-font-family: Arial, Verdana, sans-serif !default;
 $kendo-spreadsheet-view-font-size: $kendo-spreadsheet-font-size !default;
 
-$kendo-spreadsheet-selection-bg: rgba( $kendo-selected-bg, .25 ) !default;
+$kendo-spreadsheet-selection-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-selected-bg, .25 )) !default;
 $kendo-spreadsheet-selection-text: null !default;
 $kendo-spreadsheet-selection-border: $kendo-selected-bg !default;
 $kendo-spreadsheet-selection-shadow: inset 0 0 0 1px $kendo-selected-bg !default;
@@ -46,12 +46,12 @@ $kendo-spreadsheet-single-selection-bg: $kendo-selected-bg !default;
 $kendo-spreadsheet-single-selection-text: null !default;
 $kendo-spreadsheet-single-selection-border: $kendo-spreadsheet-bg !default;
 
-$kendo-spreadsheet-partial-selection-bg: rgba( $kendo-selected-bg, .25 ) !default;
+$kendo-spreadsheet-partial-selection-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-selected-bg, .25 )) !default;
 
 $kendo-spreadsheet-active-cell-bg: $kendo-spreadsheet-bg !default;
 $kendo-spreadsheet-active-cell-shadow: inset 0 0 0 1px $kendo-selected-bg !default;
 
-$kendo-spreadsheet-auto-fill-bg: rgba( $kendo-selected-bg, .25 ) !default;
+$kendo-spreadsheet-auto-fill-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-selected-bg, .25 )) !default;
 $kendo-spreadsheet-auto-fill-text: null !default;
 $kendo-spreadsheet-auto-fill-border: $kendo-selected-bg !default;
 $kendo-spreadsheet-auto-fill-shadow: inset 0 0 0 1px $kendo-selected-bg !default;
@@ -101,6 +101,6 @@ $kendo-spreadsheet-drawing-handle-border-radius: $kendo-border-radius-lg !defaul
 $kendo-spreadsheet-drawing-outline-style: solid !default;
 $kendo-spreadsheet-drawing-outline-width: 2px !default;
 
-$kendo-spreadsheet-drawing-anchor-bg: rgba( $kendo-selected-bg, .25 ) !default;
+$kendo-spreadsheet-drawing-anchor-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-selected-bg, .25 )) !default;
 
 $kendo-spreadsheet-dropzone-spacing-y: k-map-get( $kendo-spacing, 4 ) !default;
diff --git a/packages/classic/scss/stepper/_variables.scss b/packages/classic/scss/stepper/_variables.scss
index 2a5d1dbae8a..baa16945614 100644
--- a/packages/classic/scss/stepper/_variables.scss
+++ b/packages/classic/scss/stepper/_variables.scss
@@ -33,24 +33,24 @@ $kendo-stepper-indicator-bg: $kendo-component-bg !default;
 $kendo-stepper-indicator-text: $kendo-component-text !default;
 $kendo-stepper-indicator-border: $kendo-component-border !default;
 
-$kendo-stepper-indicator-hover-bg: k-try-shade( $kendo-stepper-indicator-bg ) !default;
+$kendo-stepper-indicator-hover-bg: if($kendo-enable-color-system, k-color( base-subtle-hover ), k-try-shade( $kendo-stepper-indicator-bg )) !default;
 $kendo-stepper-indicator-hover-text: null !default;
 $kendo-stepper-indicator-hover-border: null !default;
 
 $kendo-stepper-indicator-disabled-bg: null !default;
-$kendo-stepper-indicator-disabled-text: $kendo-disabled-text !default;
+$kendo-stepper-indicator-disabled-text: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .6 ), $kendo-disabled-text) !default;
 $kendo-stepper-indicator-disabled-border: null !default;
 
 $kendo-stepper-indicator-done-bg: $kendo-color-primary !default;
-$kendo-stepper-indicator-done-text: k-contrast-legacy( $kendo-stepper-indicator-done-bg ) !default;
+$kendo-stepper-indicator-done-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-stepper-indicator-done-bg )) !default;
 $kendo-stepper-indicator-done-border: $kendo-stepper-indicator-done-bg !default;
 
-$kendo-stepper-indicator-done-hover-bg: k-try-shade( $kendo-stepper-indicator-done-bg ) !default;
+$kendo-stepper-indicator-done-hover-bg: if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-stepper-indicator-done-bg )) !default;
 $kendo-stepper-indicator-done-hover-text: null !default;
 $kendo-stepper-indicator-done-hover-border: null !default;
 
-$kendo-stepper-indicator-done-disabled-bg: k-color-mix( $kendo-stepper-indicator-done-bg, $kendo-component-bg, 60% ) !default;
-$kendo-stepper-indicator-done-disabled-text: k-contrast-legacy( $kendo-stepper-indicator-done-bg ) !default;
+$kendo-stepper-indicator-done-disabled-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .6 ), k-color-mix( $kendo-stepper-indicator-done-bg, $kendo-component-bg, 60% )) !default;
+$kendo-stepper-indicator-done-disabled-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-stepper-indicator-done-bg )) !default;
 $kendo-stepper-indicator-done-disabled-border: $kendo-stepper-indicator-done-disabled-bg !default;
 
 $kendo-stepper-indicator-current-bg: $kendo-stepper-indicator-done-bg !default;
@@ -69,7 +69,7 @@ $kendo-stepper-label-text: null !default;
 $kendo-stepper-label-success-text: $kendo-color-success !default;
 $kendo-stepper-label-error-text: $kendo-color-error !default;
 $kendo-stepper-label-hover-text: null !default;
-$kendo-stepper-label-disabled-text: $kendo-disabled-text !default;
+$kendo-stepper-label-disabled-text: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .6 ), $kendo-disabled-text) !default;
 
 $kendo-stepper-optional-label-text: $kendo-subtle-text !default;
 $kendo-stepper-optional-label-opacity: null !default;
diff --git a/packages/classic/scss/switch/_variables.scss b/packages/classic/scss/switch/_variables.scss
index 4542aaad8df..b45c9ef79ee 100644
--- a/packages/classic/scss/switch/_variables.scss
+++ b/packages/classic/scss/switch/_variables.scss
@@ -68,7 +68,7 @@ $kendo-switch-off-track-focus-border: null !default;
 $kendo-switch-off-track-focus-gradient: null !default;
 /// The ring around the track when the focused Switch is not checked.
 /// @group switch
-$kendo-switch-off-track-focus-ring: 0 0 3px 1px rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .25 ) !default;
+$kendo-switch-off-track-focus-ring: 0 0 3px 1px rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .25 ) !default;
 
 /// The background of the track when the disabled Switch is not checked.
 /// @group switch
@@ -85,7 +85,7 @@ $kendo-switch-off-track-disabled-gradient: null !default;
 
 /// The background of the thumb when the Switch is not checked.
 /// @group switch
-$kendo-switch-off-thumb-bg: k-try-shade( $kendo-switch-off-track-bg ) !default;
+$kendo-switch-off-thumb-bg: if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-switch-off-track-bg )) !default;
 /// The text color of the thumb when the Switch is not checked.
 /// @group switch
 $kendo-switch-off-thumb-text: null !default;
@@ -98,7 +98,7 @@ $kendo-switch-off-thumb-gradient: $kendo-base-gradient !default;
 
 /// The background of the thumb when the hovered Switch is not checked.
 /// @group switch
-$kendo-switch-off-thumb-hover-bg: k-try-shade( $kendo-switch-off-thumb-bg ) !default;
+$kendo-switch-off-thumb-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-switch-off-thumb-bg )) !default;
 /// The text color of the thumb when the hovered Switch is not checked.
 /// @group switch
 $kendo-switch-off-thumb-hover-text: null !default;
@@ -150,7 +150,7 @@ $kendo-switch-on-track-focus-border: null !default;
 $kendo-switch-on-track-focus-gradient: null !default;
 /// The ring around the track wen the focused Switch is checked.
 /// @group switch
-$kendo-switch-on-track-focus-ring: 0 0 3px 1px rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .25 ) !default;
+$kendo-switch-on-track-focus-ring: 0 0 3px 1px rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .25 ) !default;
 
 /// The background of the track when the disabled Switch is checked.
 /// @group switch
@@ -173,20 +173,20 @@ $kendo-switch-on-thumb-bg: $kendo-color-primary !default;
 $kendo-switch-on-thumb-text: null !default;
 /// The border color of the thumb when the Switch is checked.
 /// @group switch
-$kendo-switch-on-thumb-border: k-try-shade( $kendo-switch-on-thumb-bg ) !default;
+$kendo-switch-on-thumb-border: if($kendo-enable-color-system, k-color( primary ), k-try-shade( $kendo-switch-on-thumb-bg )) !default;
 /// The background gradient of the thumb when the Switch is checked.
 /// @group switch
 $kendo-switch-on-thumb-gradient: $kendo-base-gradient !default;
 
 /// The background of the thumb when the hovered Switch is checked.
 /// @group switch
-$kendo-switch-on-thumb-hover-bg: k-try-shade( $kendo-switch-on-thumb-bg ) !default;
+$kendo-switch-on-thumb-hover-bg: if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-switch-on-thumb-bg )) !default;
 /// The text color of the thumb when the hovered Switch is checked.
 /// @group switch
 $kendo-switch-on-thumb-hover-text: null !default;
 /// The border color of the thumb when the hovered Switch is checked.
 /// @group switch
-$kendo-switch-on-thumb-hover-border: k-try-shade( $kendo-switch-on-thumb-hover-bg ) !default;
+$kendo-switch-on-thumb-hover-border: if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-switch-on-thumb-hover-bg )) !default;
 /// The background gradient of the thumb when the hovered Switch is checked.
 /// @group switch
 $kendo-switch-on-thumb-hover-gradient: null !default;
diff --git a/packages/classic/scss/table/_variables.scss b/packages/classic/scss/table/_variables.scss
index 96ec3a80546..2045fd14bef 100644
--- a/packages/classic/scss/table/_variables.scss
+++ b/packages/classic/scss/table/_variables.scss
@@ -111,7 +111,7 @@ $kendo-table-group-row-border: $kendo-table-header-border !default;
 
 /// Background color of alternating rows in table.
 /// @group table
-$kendo-table-alt-row-bg: k-try-shade( $kendo-table-bg, .5 ) !default;
+$kendo-table-alt-row-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .05 ), k-try-shade( $kendo-table-bg, .5 )) !default;
 /// Text color of alternating rows in table.
 /// @group table
 $kendo-table-alt-row-text: null !default;
@@ -122,7 +122,7 @@ $kendo-table-alt-row-border: null !default;
 
 /// Background color of hovered rows in table.
 /// @group table
-$kendo-table-hover-bg: k-try-shade( $kendo-table-bg, 1 ) !default;
+$kendo-table-hover-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .11 ), k-try-shade( $kendo-table-bg, 1 )) !default;
 /// Text color of hovered rows in table.
 /// @group table
 $kendo-table-hover-text: null !default;
@@ -147,7 +147,7 @@ $kendo-table-focus-shadow: $kendo-list-item-focus-shadow !default;
 
 /// Background color of selected rows in table.
 /// @group table
-$kendo-table-selected-bg: rgba( $kendo-selected-bg, .25 ) !default;
+$kendo-table-selected-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-selected-bg, .25 )) !default;
 /// Text color of selected rows in table.
 /// @group table
 $kendo-table-selected-text: null !default;
diff --git a/packages/classic/scss/taskboard/_variables.scss b/packages/classic/scss/taskboard/_variables.scss
index e05a6424c12..358f8b2595c 100644
--- a/packages/classic/scss/taskboard/_variables.scss
+++ b/packages/classic/scss/taskboard/_variables.scss
@@ -33,7 +33,7 @@ $kendo-taskboard-column-border: transparent !default;
 
 $kendo-taskboard-column-focus-bg: null !default;
 $kendo-taskboard-column-focus-text: null !default;
-$kendo-taskboard-column-focus-border: k-try-shade( $kendo-base-border, 2.5 ) !default;
+$kendo-taskboard-column-focus-border: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-base-border, 2.5 )) !default;
 
 $kendo-taskboard-column-header-padding-y: k-math-div( $kendo-taskboard-spacer, 2 ) !default;
 $kendo-taskboard-column-header-padding-x: $kendo-taskboard-column-header-padding-y !default;
@@ -76,10 +76,11 @@ $kendo-taskboard-card-shadow: $kendo-card-shadow !default;
 
 $kendo-taskboard-card-category-border-width: 4px !default;
 
-$kendo-taskboard-card-focus-border: k-try-shade( $kendo-taskboard-card-border, 18% ) !default;
+$kendo-taskboard-card-hover-border: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 10% )) !default;
+
+$kendo-taskboard-card-focus-border: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 18% )) !default;
 $kendo-taskboard-card-focus-shadow: none !default;
 
-$kendo-taskboard-card-hover-border: k-try-shade( $kendo-taskboard-card-border, 10% ) !default;
 
 $kendo-taskboard-card-selected-border: k-color-tint( $kendo-color-primary-lighter, 5 ) !default;
 $kendo-taskboard-card-selected-shadow: none !default;
diff --git a/packages/classic/scss/timeline/_variables.scss b/packages/classic/scss/timeline/_variables.scss
index f80a38b57bf..1a1c1afcfb8 100644
--- a/packages/classic/scss/timeline/_variables.scss
+++ b/packages/classic/scss/timeline/_variables.scss
@@ -13,9 +13,9 @@ $kendo-timeline-mobile-spacing-y: 16px !default;
 $kendo-timeline-track-arrow-width: 30px !default;
 $kendo-timeline-track-arrow-height: 30px !default;
 
-$kendo-timeline-track-arrow-disabled-text: k-true-mix( $kendo-button-text, $kendo-body-bg, 65% ) !default;
-$kendo-timeline-track-arrow-disabled-bg: k-true-mix( $kendo-button-bg, $kendo-body-bg, 65% ) !default;
-$kendo-timeline-track-arrow-disabled-border: k-true-mix( #000000, $kendo-body-bg, 4.8% ) !default;
+$kendo-timeline-track-arrow-disabled-bg: if($kendo-enable-color-system, rgba( k-color( base, true ), .6 ), k-true-mix( $kendo-button-bg, $kendo-body-bg, 65% )) !default;
+$kendo-timeline-track-arrow-disabled-text: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .6 ), k-true-mix( $kendo-button-text, $kendo-body-bg, 65% )) !default;
+$kendo-timeline-track-arrow-disabled-border: if($kendo-enable-color-system, rgba( k-color( border, true ), .15 ), k-true-mix( #000000, $kendo-body-bg, 4.8% )) !default;
 
 $kendo-timeline-track-size: 6px !default;
 $kendo-timeline-track-wrap-padding-bottom: k-math-div( $kendo-timeline-track-size, 2 ) !default;
@@ -39,7 +39,7 @@ $kendo-timeline-flag-max-width: calc(#{$kendo-timeline-flag-min-width} + 2 * #{$
 $kendo-timeline-mobile-flag-max-width: calc(#{$kendo-timeline-flag-min-width} + 2 * #{$kendo-timeline-mobile-spacing-x}) !default;
 $kendo-timeline-horizontal-flag-min-width: 60px !default;
 $kendo-timeline-flag-bg: $kendo-color-primary !default;
-$kendo-timeline-flag-text: k-contrast-legacy( $kendo-timeline-flag-bg ) !default;
+$kendo-timeline-flag-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-timeline-flag-bg )) !default;
 
 $kendo-timeline-flag-callout-width: 10px !default;
 $kendo-timeline-flag-callout-height: 10px !default;
diff --git a/packages/classic/scss/tooltip/_variables.scss b/packages/classic/scss/tooltip/_variables.scss
index cd2f3c29317..bad0a28b4f5 100644
--- a/packages/classic/scss/tooltip/_variables.scss
+++ b/packages/classic/scss/tooltip/_variables.scss
@@ -36,10 +36,10 @@ $kendo-tooltip-callout-size: 6px !default;
 
 /// The default background of the Tooltip.
 /// @group tooltip
-$kendo-tooltip-bg: rgba( k-contrast-color( $kendo-body-bg ), .75 ) !default;
+$kendo-tooltip-bg: if($kendo-enable-color-system, k-color( on-app-surface ), rgba( k-contrast-color( $kendo-body-bg ), .75 )) !default;
 /// The default text color of the Tooltip.
 /// @group tooltip
-$kendo-tooltip-text: k-contrast-color( $kendo-tooltip-bg ) !default;
+$kendo-tooltip-text: if($kendo-enable-color-system, k-color( app-surface ), k-contrast-color( $kendo-tooltip-bg )) !default;
 /// The default border color of the Tooltip.
 /// @group tooltip
 $kendo-tooltip-border: $kendo-tooltip-bg !default;
@@ -53,7 +53,7 @@ $kendo-tooltip-shadow: k-elevation(2) !default;
 
     @each $name, $color in $colors {
         $_theme: k-map-merge(( $name: (
-            color: k-contrast-legacy( $color ),
+            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )),
             background-color: $color,
             border: $color,
         )), $_theme );
@@ -67,4 +67,4 @@ $kendo-tooltip-shadow: k-elevation(2) !default;
 $kendo-tooltip-theme-colors: $kendo-theme-colors !default;
 /// The generated theme colors map for the Tooltip.
 /// @group tooltip
-$kendo-tooltip-theme: tooltip-theme( $kendo-tooltip-theme-colors ) !default;
\ No newline at end of file
+$kendo-tooltip-theme: tooltip-theme( $kendo-tooltip-theme-colors ) !default;
diff --git a/packages/default/scss/core/color-system/_swatch.scss b/packages/default/scss/core/color-system/_swatch.scss
index 937aea05dbc..8abe75de92d 100644
--- a/packages/default/scss/core/color-system/_swatch.scss
+++ b/packages/default/scss/core/color-system/_swatch.scss
@@ -394,4 +394,4 @@ $kendo-valid-text: $kendo-color-success !default;
 $kendo-valid-border: $kendo-color-success !default;
 /// Shadow of the valid items.
 /// @group component
-$kendo-valid-shadow: null !default;
\ No newline at end of file
+$kendo-valid-shadow: null !default;
diff --git a/packages/fluent/scss/all.scss b/packages/fluent/scss/all.scss
index 2218699f524..2771705e483 100644
--- a/packages/fluent/scss/all.scss
+++ b/packages/fluent/scss/all.scss
@@ -1,5 +1,5 @@
 @use "./index.scss" as kendo-theme with (
-    $kendo-new-colors: true,
+    $kendo-enable-color-system: false,
 );
 
 @include kendo-theme.config();
diff --git a/packages/fluent/scss/core/_index.scss b/packages/fluent/scss/core/_index.scss
index bf41edfa708..9370e5d8a7e 100644
--- a/packages/fluent/scss/core/_index.scss
+++ b/packages/fluent/scss/core/_index.scss
@@ -11,7 +11,7 @@
 @forward "./variables";
 
 @forward "@progress/kendo-theme-core/scss/index.import.scss" with (
-    $kendo-new-colors: $kendo-new-colors !default,
+    $kendo-enable-color-system: $kendo-enable-color-system !default,
     // Color System
     $kendo-colors: $kendo-colors !default,
     // Legacy
diff --git a/packages/fluent/scss/core/color-system/_swatch-legacy.scss b/packages/fluent/scss/core/color-system/_swatch-legacy.scss
index 39c5172805e..6c0c9992cc9 100644
--- a/packages/fluent/scss/core/color-system/_swatch-legacy.scss
+++ b/packages/fluent/scss/core/color-system/_swatch-legacy.scss
@@ -1,6 +1,6 @@
 @use "@progress/kendo-theme-core/scss/index.import.scss" as *;
 
-@if($kendo-new-colors) {
+@if($kendo-enable-color-system) {
     $kendo-body-bg: null;
     $kendo-body-text: null;
     $kendo-component-bg: null;
@@ -71,4 +71,4 @@
     --kendo-border-radius-sm: #{$kendo-border-radius-sm};
     --kendo-border-radius-md: #{$kendo-border-radius-md};
     --kendo-border-radius-lg: #{$kendo-border-radius-lg};
-}
\ No newline at end of file
+}
diff --git a/packages/fluent/scss/core/color-system/_swatch.scss b/packages/fluent/scss/core/color-system/_swatch.scss
index d590b307188..e106164fd10 100644
--- a/packages/fluent/scss/core/color-system/_swatch.scss
+++ b/packages/fluent/scss/core/color-system/_swatch.scss
@@ -6,7 +6,7 @@
 // TODO!
 
 // Config
-$kendo-new-colors: false !default;
+$kendo-enable-color-system: false !default;
 
 // Colors
 $_default-colors: (
@@ -167,6 +167,11 @@ $kendo-invalid-text: functions.k-get-theme-color-var(error-190) !default;
 $kendo-invalid-border: functions.k-get-theme-color-var(error-190) !default;
 $kendo-invalid-shadow: null !default;
 
+$kendo-valid-bg: initial !default;
+$kendo-valid-text: k-get-theme-color-var( success-190 ) !default;
+$kendo-valid-border: k-get-theme-color-var( success-190 ) !default;
+$kendo-valid-shadow: null !default;
+
 // Disabled Styling
 $kendo-disabled-bg: functions.k-get-theme-color-var(neutral-20) !default;
 $kendo-disabled-text: functions.k-get-theme-color-var(neutral-90) !default;
diff --git a/packages/fluent/scss/input/_variables.scss b/packages/fluent/scss/input/_variables.scss
index 7e9574f3f70..c27e9890f32 100644
--- a/packages/fluent/scss/input/_variables.scss
+++ b/packages/fluent/scss/input/_variables.scss
@@ -653,6 +653,12 @@ $kendo-input-invalid-border: var( --kendo-invalid-border, #{$kendo-invalid-borde
 /// @group input
 $kendo-input-invalid-text: var( --kendo-invalid-text, #{$kendo-invalid-text} ) !default;
 
+// REMOVE
+$kendo-valid-bg: initial !default;
+$kendo-valid-text: k-get-theme-color-var( success-190 ) !default;
+$kendo-valid-border: k-get-theme-color-var( success-190 ) !default;
+$kendo-valid-shadow: null !default;
+
 /// The border color of the valid Input components.
 /// @group input
 $kendo-input-valid-border: var( --kendo-valid-border, #{$kendo-valid-border} ) !default;
diff --git a/packages/material/scss/core/color-system/_swatch-legacy.scss b/packages/material/scss/core/color-system/_swatch-legacy.scss
index 6c9a6407e60..11533efdfac 100644
--- a/packages/material/scss/core/color-system/_swatch-legacy.scss
+++ b/packages/material/scss/core/color-system/_swatch-legacy.scss
@@ -1,4 +1,4 @@
-@if ($kendo-new-colors) {
+@if ($kendo-enable-color-system) {
     $dark-primary-text: null;
     $dark-secondary-text: null;
     $dark-disabled-text: null;
diff --git a/packages/material/scss/core/color-system/_swatch.scss b/packages/material/scss/core/color-system/_swatch.scss
index 7088552c4c7..7478b868201 100644
--- a/packages/material/scss/core/color-system/_swatch.scss
+++ b/packages/material/scss/core/color-system/_swatch.scss
@@ -1,10 +1,14 @@
+// Temporary fix for undefined variables (used in _palettes.scss
+$dark-primary-text: rgba(black, 0.87) !default;
+$light-primary-text: #ffffff !default;
+
 @import "@progress/kendo-theme-core/scss/functions/index.import.scss";
 @import "@progress/kendo-theme-core/scss/color-system/_constants.scss";
 @import "./_palettes.scss";
 @import "./_functions.scss";
 
 // Config
-$kendo-new-colors: false !default;
+$kendo-enable-color-system: false !default;
 
 // TODO!
 // Colors