@progress/kendo-theme-default 7.1.0-dev.7 → 7.1.0-dev.9

package/dist/all.scss

@@ -712,6 +712,28 @@ $kendo-color-level-step: 8% !default;
     @return k-color-mix( rgba( $color1, 1 ), rgba( $color2, 1 ), $weight );
 }
 
+/// Generates all color variations of a given main color
+/// @param {String} $name - The name of the main color
+/// @param {Color} $level - The color value to be assigned to the main color
+/// @return {Map} - A map with the generated keys and values
+///
+/// @group color-system
+@function k-generate-colors( $name, $color ) {
+    $_variations: (
+        #{$name}-subtle: k-try-tint( $color, 80% ),
+        #{$name}-subtle-hover: k-try-tint( $color, 65% ),
+        #{$name}-subtle-active: k-try-tint( $color, 50% ),
+        #{$name}: $color,
+        #{$name}-hover: k-try-shade( $color, 0.5 ),
+        #{$name}-active: k-try-shade( $color, 1.5 ),
+        #{$name}-emphasis: k-try-tint( $color, 4.5 ),
+        #{$name}-on-subtle: k-try-shade( $color, 8 ),
+        on-#{$name}: k-contrast-legacy( $color ),
+        #{$name}-on-surface: $color,
+    );
+    
+    @return $_variations;
+}
 // #endregion
 // #region @import "./_custom-properties.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/functions/_custom-properties.import.scss
 @function k-var( $prefix: kendo-, $var: null, $fallback: null ) {
@@ -1731,9 +1753,6 @@ $svg-escaped-characters: (
 
 // #endregion
 
-$kendo-color-white: #ffffff; // stylelint-disable-line scss/dollar-variable-default
-$kendo-color-black: #000000; // stylelint-disable-line scss/dollar-variable-default
-
 // Options
 $kendo-enable-rounded: true !default;
 $kendo-enable-shadows: true !default;
@@ -1872,102 +1891,7 @@ $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: #ff6358 !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: #666666 !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-legacy( $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-legacy( $kendo-color-tertiary ) !default;
-
-/// The color for informational messages and states.
-/// @group color-system
-/// @type Color
-$kendo-color-info: #0058e9 !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: #37b400 !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: #ffc000 !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: #f31700 !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: #424242 !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
@@ -2049,6 +1973,620 @@ $kendo-font-weight-bold: 700 !default;
 $kendo-letter-spacing: null !default;
 
 
+// TODO: refactor
+/// Box shadow of focused items.
+$kendo-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
+
+/// Transition used across all components.
+$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;
+
+
+/// Filter used for disabled items.
+$kendo-disabled-filter: grayscale(.1) !default;
+/// Opacity used for disabled items.
+$kendo-disabled-opacity: .6 !default;
+
+$kendo-disabled-styling: (
+    opacity: $kendo-disabled-opacity,
+    filter: $kendo-disabled-filter
+) !default;
+
+
+// Loading
+$kendo-loading-opacity: .3 !default;
+$kendo-zindex-loading: 100 !default;
+
+// #endregion
+
+// Color System
+// #region @import "./color-system/_swatch.scss"; -> scss/core/color-system/_swatch.scss
+// #region @import "@progress/kendo-theme-core/scss/functions/index.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/functions/index.import.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "@progress/kendo-theme-core/scss/color-system/_constants.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/color-system/_constants.scss
+// Color constants
+
+/// 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
+
+/// The color transparent.
+/// Note: you cannot change this value.
+/// @type Color
+/// @group color-system
+$kendo-color-rgba-transparent: rgba(0, 0, 0, 0); // stylelint-disable-line scss/dollar-variable-default
+
+/// A gradient that goes from transparent to black.
+/// Note: you cannot change this value.
+/// @type Gradient
+/// @group color-system
+$kendo-gradient-transparent-to-black: rgba(black, 0), black; // stylelint-disable-line scss/dollar-variable-default
+
+/// A gradient that goes from transparent to white.
+/// Note: you cannot change this value.
+/// @type Gradient
+/// @group color-system
+$kendo-gradient-transparent-to-white: rgba(white, 0), white; // stylelint-disable-line scss/dollar-variable-default
+
+/// A gradient that goes from black to transparent.
+/// Note: you cannot change this value.
+/// @type Gradient
+/// @group color-system
+$kendo-gradient-black-to-transparent: black, rgba(black, 0); // stylelint-disable-line scss/dollar-variable-default
+
+/// A gradient that goes from white to transparent.
+/// Note: you cannot change this value.
+/// @type Gradient
+/// @group color-system
+$kendo-gradient-white-to-transparent: white, rgba(white, 0); // stylelint-disable-line scss/dollar-variable-default
+
+/// A gradient that cycles through the colors of the rainbow.
+/// Note: you cannot change this value.
+/// @type Gradient
+/// @group color-system
+$kendo-gradient-rainbow: #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000; // stylelint-disable-line scss/dollar-variable-default
+
+// #endregion
+// #region @import "./_palettes.scss"; -> scss/core/color-system/_palettes.scss
+$_default-palette-gray: (
+    white: #ffffff,
+    1: #fafafa,
+    2: #f5f5f5,
+    3: #ebebeb,
+    4: #e0e0e0,
+    5: #d6d6d6,
+    6: #c2c2c2,
+    7: #adadad,
+    8: #999999,
+    9: #808080,
+    10: #666666,
+    11: #525252,
+    12: #3d3d3d,
+    13: #292929,
+    14: #1f1f1f,
+    15: #141414,
+    black: #000000,
+);
+
+$_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-sky-blue: (
+    1: #ebf8fe,
+    2: #d8f1fd,
+    3: #c5eafc,
+    4: #a3dffb,
+    5: #81d4fA,
+    6: #61c9f9,
+    7: #42bff7,
+    8: #22b3f5,
+    9: #03a9f4,
+    10: #039ae0,
+    11: #028ccb,
+    12: #027fb7,
+    13: #026999,
+    14: #02557a,
+    15: #023f5c,
+);
+
+$_default-palette-green: (
+    1: #edf8e9,
+    2: #dcf0d3,
+    3: #cbe9bf,
+    4: #b7e1a5,
+    5: #9bda80,
+    6: #81d15f,
+    7: #69c740,
+    8: #4ebe1f,
+    9: #37b400,
+    10: #32a500,
+    11: #2d9600,
+    12: #298700,
+    13: #227100,
+    14: #1c5a00,
+    15: #1c5a00,
+);
+
+$_default-palette-blue: (
+    1: #e9f0fd,
+    2: #d2e2fb,
+    3: #bdd4f8,
+    4: #9ec0f6,
+    5: #80acf4,
+    6: #6098f2,
+    7: #4082ef,
+    8: #206eec,
+    9: #0058e9,
+    10: #0052d6,
+    11: #004ac2,
+    12: #0042af,
+    13: #003892,
+    14: #002c75,
+    15: #002259,
+);
+
+$_default-palette-yellow: (
+    1: #fffae9,
+    2: #fff4d3,
+    3: #ffeebd,
+    4: #ffe79e,
+    5: #ffe080,
+    6: #ffd760,
+    7: #ffd040,
+    8: #ffc720,
+    9: #ffc000,
+    10: #eaaf00,
+    11: #d49f00,
+    12: #bf9000,
+    13: #a07800,
+    14: #806000,
+    15: #5e4700,
+);
+
+$_default-palette-red: (
+    1: #feeeed,
+    2: #fcddda,
+    3: #fbc8c3,
+    4: #faaaa2,
+    5: #f98b80,
+    6: #f76f60,
+    7: #f65140,
+    8: #f43520,
+    9: #f31700,
+    10: #df1600,
+    11: #ca1400,
+    12: #b61100,
+    13: #980f00,
+    14: #7a0c00,
+    15: #7a0c00,
+);
+
+$_default-palette-lemon-yellow: (
+    1: #fffcf1,
+    2: #fffae2,
+    3: #fff7d4,
+    4: #fff4c2,
+    5: #fff0b1,
+    6: #ffed9d,
+    7: #ffe989,
+    8: #ffe676,
+    9: #ffe162,
+    10: #ead05a,
+    11: #d4bc52,
+    12: #bfa94a,
+    13: #a3913f,
+    14: #807131,
+    15: #5c5223,
+);
+
+$_default-palette-spring-green: (
+    1: #effaf3,
+    2: #e0f6e8,
+    3: #d1f1dd,
+    4: #c0edd1,
+    5: #a6e8c0,
+    6: #8fe2af,
+    7: #79dda0,
+    8: #62d78f,
+    9: #4cd180,
+    10: #46c074,
+    11: #3fae6a,
+    12: #399d60,
+    13: #2f834f,
+    14: #266940,
+    15: #1c4f30,
+);
+
+$_default-palette-royal-blue: (
+    1: #f0f2ff,
+    2: #e1e4fe,
+    3: #d2d7fe,
+    4: #bbc3fd,
+    5: #a5affd,
+    6: #8e9bfc,
+    7: #7887fb,
+    8: #6173fb,
+    9: #4b5ffa,
+    10: #4558e5,
+    11: #3f50d1,
+    12: #3847bc,
+    13: #2f3c9d,
+    14: #26307d,
+    15: #1c245e,
+);
+
+$_default-palette-lavender-purple: (
+    1: #f7f0ff,
+    2: #f0e0ff,
+    3: #e8d1ff,
+    4: #dfbfff,
+    5: #d6acff,
+    6: #cc97ff,
+    7: #c182ff,
+    8: #b76dff,
+    9: #ac58ff,
+    10: #9e51ea,
+    11: #8f49d4,
+    12: #8142bf,
+    13: #6b37a0,
+    14: #562c80,
+    15: #3f205e,
+);
+
+$_default-palette-flamingo-pink: (
+    1: #fff0f5,
+    2: #ffe1eb,
+    3: #ffd1e1,
+    4: #ffbfd6,
+    5: #ffacc9,
+    6: #ff97bb,
+    7: #ff82ae,
+    8: #ff6da0,
+    9: #ff5892,
+    10: #ea5186,
+    11: #d4497a,
+    12: #bf426e,
+    13: #a0375c,
+    14: #802c49,
+    15: #5e2036,
+);
+
+
+// stylelint-disable scss/no-global-function-names
+$kendo-palette-gray: $_default-palette-gray !default;
+$kendo-palette-gray: map-merge($_default-palette-gray, $kendo-palette-gray);
+
+$kendo-palette-coral: $_default-palette-coral !default;
+$kendo-palette-coral: map-merge($_default-palette-coral, $kendo-palette-coral);
+
+$kendo-palette-sky-blue: $_default-palette-sky-blue !default;
+$kendo-palette-sky-blue: map-merge($_default-palette-sky-blue, $kendo-palette-sky-blue);
+
+$kendo-palette-green: $_default-palette-green !default;
+$kendo-palette-green: map-merge($_default-palette-green, $kendo-palette-green);
+
+$kendo-palette-blue: $_default-palette-blue !default;
+$kendo-palette-blue: map-merge($_default-palette-blue, $kendo-palette-blue);
+
+$kendo-palette-yellow: $_default-palette-yellow !default;
+$kendo-palette-yellow: map-merge($_default-palette-yellow, $kendo-palette-yellow);
+
+$kendo-palette-red: $_default-palette-red !default;
+$kendo-palette-red: map-merge($_default-palette-red, $kendo-palette-red);
+
+$kendo-palette-lemon-yellow: $_default-palette-lemon-yellow !default;
+$kendo-palette-lemon-yellow: map-merge($_default-palette-lemon-yellow, $kendo-palette-lemon-yellow);
+
+$kendo-palette-spring-green: $_default-palette-spring-green !default;
+$kendo-palette-spring-green: map-merge($_default-palette-spring-green, $kendo-palette-spring-green);
+
+$kendo-palette-royal-blue: $_default-palette-royal-blue !default;
+$kendo-palette-royal-blue: map-merge($_default-palette-royal-blue, $kendo-palette-royal-blue);
+
+$kendo-palette-lavender-purple: $_default-palette-lavender-purple !default;
+$kendo-palette-lavender-purple: map-merge($_default-palette-lavender-purple, $kendo-palette-lavender-purple);
+
+$kendo-palette-flamingo-pink: $_default-palette-flamingo-pink !default;
+$kendo-palette-flamingo-pink: map-merge($_default-palette-flamingo-pink, $kendo-palette-flamingo-pink);
+// stylelint-enable scss/no-global-function-names
+// #endregion
+
+// Config
+$kendo-enable-color-system: false !default;
+
+// Colors
+$_default-colors: (
+    // Misc
+    app-surface: k-map-get( $kendo-palette-gray, white ),
+    on-app-surface: k-map-get( $kendo-palette-gray, 12 ),
+    subtle: k-map-get( $kendo-palette-gray, 10 ),
+    surface: k-map-get( $kendo-palette-gray, 1 ),
+    surface-alt: k-map-get( $kendo-palette-gray, white ),
+    border: rgba( k-map-get( $kendo-palette-gray, black ), .08),
+    border-alt: rgba( k-map-get( $kendo-palette-gray, black ), .16),
+    // Base
+    base-subtle: k-map-get( $kendo-palette-gray, 3 ),
+    base-subtle-hover: k-map-get( $kendo-palette-gray, 4 ),
+    base-subtle-active: k-map-get( $kendo-palette-gray, 5 ),
+    base: k-map-get( $kendo-palette-gray, 2 ),
+    base-hover: k-map-get( $kendo-palette-gray, 3 ),
+    base-active: k-map-get( $kendo-palette-gray, 5 ),
+    base-emphasis: k-map-get( $kendo-palette-gray, 6 ),
+    base-on-subtle: k-map-get( $kendo-palette-gray, 12 ),
+    on-base: k-map-get( $kendo-palette-gray, 12 ),
+    base-on-surface: k-map-get( $kendo-palette-gray, 12 ),
+    // Primary
+    primary-subtle: k-map-get( $kendo-palette-coral, 2 ),
+    primary-subtle-hover: k-map-get( $kendo-palette-coral, 3 ),
+    primary-subtle-active: k-map-get( $kendo-palette-coral, 4 ),
+    primary: k-map-get( $kendo-palette-coral, 9 ),
+    primary-hover: k-map-get( $kendo-palette-coral, 10 ),
+    primary-active: k-map-get( $kendo-palette-coral, 11 ),
+    primary-emphasis: k-map-get( $kendo-palette-coral, 6 ),
+    primary-on-subtle: k-map-get( $kendo-palette-coral, 15 ),
+    on-primary: k-map-get( $kendo-palette-gray, white ),
+    primary-on-surface: k-map-get( $kendo-palette-coral, 9 ),
+    // Secondary
+    secondary-subtle: k-map-get( $kendo-palette-gray, 1 ),
+    secondary-subtle-hover: k-map-get( $kendo-palette-gray, 2 ),
+    secondary-subtle-active: k-map-get( $kendo-palette-gray, 3 ),
+    secondary: k-map-get( $kendo-palette-gray, 10 ),
+    secondary-hover: k-map-get( $kendo-palette-gray, 11 ),
+    secondary-active: k-map-get( $kendo-palette-gray, 12 ),
+    secondary-emphasis: k-map-get( $kendo-palette-gray, 4 ),
+    secondary-on-subtle: k-map-get( $kendo-palette-gray, 15 ),
+    on-secondary: k-map-get( $kendo-palette-gray, white ),
+    secondary-on-surface: k-map-get( $kendo-palette-gray, 13 ),
+    // Tertiary
+    tertiary-subtle: k-map-get( $kendo-palette-sky-blue, 2 ),
+    tertiary-subtle-hover: k-map-get( $kendo-palette-sky-blue, 3 ),
+    tertiary-subtle-active: k-map-get( $kendo-palette-sky-blue, 4 ),
+    tertiary: k-map-get( $kendo-palette-sky-blue, 9 ),
+    tertiary-hover: k-map-get( $kendo-palette-sky-blue, 10 ),
+    tertiary-active: k-map-get( $kendo-palette-sky-blue, 11 ),
+    tertiary-emphasis: k-map-get( $kendo-palette-sky-blue, 6 ),
+    tertiary-on-subtle: k-map-get( $kendo-palette-sky-blue, 15 ),
+    on-tertiary: k-map-get( $kendo-palette-gray, white ),
+    tertiary-on-surface: k-map-get( $kendo-palette-sky-blue, 11 ),
+    // Info
+    info-subtle: k-map-get( $kendo-palette-blue, 2 ),
+    info-subtle-hover: k-map-get( $kendo-palette-blue, 3 ),
+    info-subtle-active: k-map-get( $kendo-palette-blue, 5 ),
+    info: k-map-get( $kendo-palette-blue, 9 ),
+    info-hover: k-map-get( $kendo-palette-blue, 10 ),
+    info-active: k-map-get( $kendo-palette-blue, 11 ),
+    info-emphasis: k-map-get( $kendo-palette-blue, 6 ),
+    info-on-subtle: k-map-get( $kendo-palette-blue, 15 ),
+    on-info: k-map-get( $kendo-palette-gray, white ),
+    info-on-surface: k-map-get( $kendo-palette-blue, 11 ),
+    // Success
+    success-subtle: k-map-get( $kendo-palette-green, 2 ),
+    success-subtle-hover: k-map-get( $kendo-palette-green, 3 ),
+    success-subtle-active: k-map-get( $kendo-palette-green, 4 ),
+    success: k-map-get( $kendo-palette-green, 9 ),
+    success-hover: k-map-get( $kendo-palette-green, 10 ),
+    success-active: k-map-get( $kendo-palette-green, 11 ),
+    success-emphasis: k-map-get( $kendo-palette-green, 6 ),
+    success-on-subtle: k-map-get( $kendo-palette-green, 15 ),
+    on-success: k-map-get( $kendo-palette-gray, white ),
+    success-on-surface: k-map-get( $kendo-palette-green, 11 ),
+    // Warning
+    warning-subtle: k-map-get( $kendo-palette-yellow, 2 ),
+    warning-subtle-hover: k-map-get( $kendo-palette-yellow, 3 ),
+    warning-subtle-active: k-map-get( $kendo-palette-yellow, 4 ),
+    warning: k-map-get( $kendo-palette-yellow, 9 ),
+    warning-hover: k-map-get( $kendo-palette-yellow, 10 ),
+    warning-active: k-map-get( $kendo-palette-yellow, 11 ),
+    warning-emphasis: k-map-get( $kendo-palette-yellow, 6 ),
+    warning-on-subtle: k-map-get( $kendo-palette-yellow, 15 ),
+    on-warning: k-map-get( $kendo-palette-gray, 12 ),
+    warning-on-surface: k-map-get( $kendo-palette-yellow, 9 ),
+    // Error
+    error-subtle: k-map-get( $kendo-palette-red, 2 ),
+    error-subtle-hover: k-map-get( $kendo-palette-red, 3 ),
+    error-subtle-active: k-map-get( $kendo-palette-red, 5 ),
+    error: k-map-get( $kendo-palette-red, 9 ),
+    error-hover: k-map-get( $kendo-palette-red, 10 ),
+    error-active: k-map-get( $kendo-palette-red, 11 ),
+    error-emphasis: k-map-get( $kendo-palette-red, 6 ),
+    error-on-subtle: k-map-get( $kendo-palette-red, 15 ),
+    on-error: k-map-get( $kendo-palette-gray, white ),
+    error-on-surface: k-map-get( $kendo-palette-red, 11 ),
+    // Light
+    light-subtle: k-map-get( $kendo-palette-gray, 1 ),
+    light-subtle-hover: k-map-get( $kendo-palette-gray, 2 ),
+    light-subtle-active: k-map-get( $kendo-palette-gray, 3 ),
+    light: k-map-get( $kendo-palette-gray, 3 ),
+    light-hover: k-map-get( $kendo-palette-gray, 4 ),
+    light-active: k-map-get( $kendo-palette-gray, 5 ),
+    light-emphasis: k-map-get( $kendo-palette-gray, 5 ),
+    light-on-subtle: k-map-get( $kendo-palette-gray, 15 ),
+    on-light: k-map-get( $kendo-palette-gray, black ),
+    light-on-surface: k-map-get( $kendo-palette-gray, 4 ),
+    // Dark
+    dark-subtle: k-map-get( $kendo-palette-gray, 6 ),
+    dark-subtle-hover: k-map-get( $kendo-palette-gray, 7 ),
+    dark-subtle-active: k-map-get( $kendo-palette-gray, 8 ),
+    dark: k-map-get( $kendo-palette-gray, 12 ),
+    dark-hover: k-map-get( $kendo-palette-gray, 13 ),
+    dark-active: k-map-get( $kendo-palette-gray, 14 ),
+    dark-emphasis: k-map-get( $kendo-palette-gray, 10 ),
+    dark-on-subtle: k-map-get( $kendo-palette-gray, 14 ),
+    on-dark: k-map-get( $kendo-palette-gray, white ),
+    dark-on-surface: k-map-get( $kendo-palette-gray, 15 ),
+    // Inverse
+    inverse-subtle: k-map-get( $kendo-palette-gray, 6 ),
+    inverse-subtle-hover: k-map-get( $kendo-palette-gray, 7 ),
+    inverse-subtle-active: k-map-get( $kendo-palette-gray, 8 ),
+    inverse: k-map-get( $kendo-palette-gray, 12 ),
+    inverse-hover: k-map-get( $kendo-palette-gray, 13 ),
+    inverse-active: k-map-get( $kendo-palette-gray, 14 ),
+    inverse-emphasis: k-map-get( $kendo-palette-gray, 10 ),
+    inverse-on-subtle: k-map-get( $kendo-palette-gray, 14 ),
+    on-inverse: k-map-get( $kendo-palette-gray, white ),
+    inverse-on-surface: k-map-get( $kendo-palette-gray, 15 ),
+    // 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-lemon-yellow, 9 ),
+    series-b-bold: k-map-get( $kendo-palette-lemon-yellow, 12 ),
+    series-b-bolder: k-map-get( $kendo-palette-lemon-yellow, 14 ),
+    series-b-subtle: k-map-get( $kendo-palette-lemon-yellow, 5 ),
+    series-b-subtler: k-map-get( $kendo-palette-lemon-yellow, 7 ),
+    // Series C
+    series-c: k-map-get( $kendo-palette-spring-green, 9 ),
+    series-c-bold: k-map-get( $kendo-palette-spring-green, 12 ),
+    series-c-bolder: k-map-get( $kendo-palette-spring-green, 14 ),
+    series-c-subtle: k-map-get( $kendo-palette-spring-green, 5 ),
+    series-c-subtler: k-map-get( $kendo-palette-spring-green, 7 ),
+    // Series D
+    series-d: k-map-get( $kendo-palette-royal-blue, 9 ),
+    series-d-bold: k-map-get( $kendo-palette-royal-blue, 12 ),
+    series-d-bolder: k-map-get( $kendo-palette-royal-blue, 14 ),
+    series-d-subtle: k-map-get( $kendo-palette-royal-blue, 5 ),
+    series-d-subtler: k-map-get( $kendo-palette-royal-blue, 7 ),
+    // Series Е
+    series-e: k-map-get( $kendo-palette-lavender-purple, 9 ),
+    series-e-bold: k-map-get( $kendo-palette-lavender-purple, 12 ),
+    series-e-bolder: k-map-get( $kendo-palette-lavender-purple, 14 ),
+    series-e-subtle: k-map-get( $kendo-palette-lavender-purple, 5 ),
+    series-e-subtler: k-map-get( $kendo-palette-lavender-purple, 7 ),
+    // Series F
+    series-f: k-map-get( $kendo-palette-flamingo-pink, 9 ),
+    series-f-bold: k-map-get( $kendo-palette-flamingo-pink, 12 ),
+    series-f-bolder: k-map-get( $kendo-palette-flamingo-pink, 14 ),
+    series-f-subtle: k-map-get( $kendo-palette-flamingo-pink, 5 ),
+    series-f-subtler: k-map-get( $kendo-palette-flamingo-pink, 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: #ff6358 !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: #666666 !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-legacy($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-legacy($kendo-color-tertiary) !default;
+
+/// The color for informational messages and states.
+/// @group color-system
+/// @type Color
+$kendo-color-info: #0058e9 !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: #37b400 !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: #ffc000 !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: #f31700 !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: #424242 !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,
+); // todo: add !default;
+
 // Generic styles
 
 /// Background color of the body.
@@ -2062,9 +2600,9 @@ $kendo-body-text: #424242 !default;
 /// @group common
 $kendo-subtle-text: #666666 !default;
 
-$kendo-app-bg: k-try-shade( $kendo-body-bg, .25 ) !default;
+$kendo-app-bg: k-try-shade($kendo-body-bg, 0.25) !default;
 $kendo-app-text: $kendo-body-text !default;
-$kendo-app-border: rgba( $kendo-color-black, .08 ) !default;
+$kendo-app-border: rgba($kendo-color-black, 0.08) !default;
 
 // Link
 /// Text color of the links.
@@ -2074,7 +2612,6 @@ $kendo-link-text: $kendo-color-primary !default;
 /// @group common
 $kendo-link-hover-text: $kendo-color-primary-darker !default;
 
-
 // Components
 
 // Component
@@ -2089,20 +2626,19 @@ $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: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 ) !default;
-
+$kendo-component-border: rgba(if($kendo-is-dark-theme, $kendo-color-white, $kendo-color-black), 0.08) !default;
 
 /// The background of the components' chrome area.
 $kendo-base-bg: #fafafa !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: rgba( black, .08 ) !default;
+$kendo-base-border: rgba(black, 0.08) !default;
 /// The gradient background of the components' chrome area.
-$kendo-base-gradient: rgba( black, 0 ), rgba( black, .02 ) !default;
+$kendo-base-gradient: rgba(black, 0), rgba(black, 0.02) !default;
 
 /// The background of hovered items.
-$kendo-hover-bg: k-try-shade( $kendo-base-bg, .5 ) !default;
+$kendo-hover-bg: k-try-shade($kendo-base-bg, 0.5) !default;
 /// The text color of hovered items.
 $kendo-hover-text: $kendo-base-text !default;
 /// The border color of hovered items.
@@ -2113,14 +2649,14 @@ $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;
+$kendo-selected-text: k-contrast-legacy($kendo-selected-bg) !default;
 /// The border color of selected items.
 $kendo-selected-border: $kendo-base-border !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, .5 ) !default;
+$kendo-selected-hover-bg: k-try-shade($kendo-selected-bg, 0.5) !default;
 /// The text color of selected and hovered items.
 $kendo-selected-hover-text: $kendo-selected-text !default;
 /// The border of selected and hovered items.
@@ -2128,26 +2664,8 @@ $kendo-selected-hover-border: $kendo-base-border !default;
 /// The gradient of selected and hovered items.
 $kendo-selected-hover-gradient: $kendo-base-gradient !default;
 
-// TODO: refactor
-/// Box shadow of focused items.
-$kendo-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
-
-/// Transition used across all components.
-$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;
-
-
 /// Text color of disabled items.
 $kendo-disabled-text: #8f8f8f !default;
-/// Filter used for disabled items.
-$kendo-disabled-filter: grayscale(.1) !default;
-/// Opacity used for disabled items.
-$kendo-disabled-opacity: .6 !default;
-
-$kendo-disabled-styling: (
-    opacity: $kendo-disabled-opacity,
-    filter: $kendo-disabled-filter
-) !default;
-
 
 // Generic styles
 
@@ -2164,7 +2682,6 @@ $kendo-component-header-border: $kendo-base-border !default;
 /// @group component
 $kendo-component-header-gradient: null !default;
 
-
 /// Background color of the invalid items.
 /// @group component
 $kendo-invalid-bg: null !default;
@@ -2191,10 +2708,6 @@ $kendo-valid-border: $kendo-color-success !default;
 /// @group component
 $kendo-valid-shadow: null !default;
 
-// Loading
-$kendo-loading-opacity: .3 !default;
-$kendo-zindex-loading: 100 !default;
-
 // #endregion
 
 // #region @import "@progress/kendo-theme-core/scss/index.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/index.import.scss
@@ -3282,6 +3795,31 @@ $kendo-palettes: (
     @return var( --#{$prefix}#{$name}, #{$fallback} );
 }
 
+@function k-get-swatch-color( $name, $color ) {
+    $map: (
+        app-surface: k-color( app-surface ),
+        on-app-surface: k-color( on-app-surface ),
+        subtle: k-color( subtle ),
+        surface: k-color( surface ),
+        surface-alt: k-color( surface-alt ),
+        border: k-color( border ),
+        border-alt: k-color( border-alt ),
+        color-subtle: k-color( #{$color}-subtle ),
+        color-subtle-hover: k-color( #{$color}-subtle-hover ),
+        color-subtle-active: k-color( #{$color}-subtle-active ),
+        color: k-color( #{$color} ),
+        color-hover: k-color( #{$color}-hover ),
+        color-active: k-color( #{$color}-active ),
+        color-emphasis: k-color( #{$color}-emphasis ),
+        color-on-subtle: k-color( #{$color}-on-subtle ),
+        on-color: k-color( on-#{$color} ),
+        color-on-surface: k-color( #{$color}-on-surface ),
+        on-color-disabled: rgba( k-color( on-#{$color}, true ), .46)
+    );
+
+    @return if( k-map-has-key( $map, $name ), k-map-get( $map, $name ), $name );
+};
+
 @function k-generate-theme-variation( $theme-color, $source-palette-name, $mapping ) {
     $temp: ( );
 
@@ -3293,9 +3831,9 @@ $kendo-palettes: (
         $border-prop: k-list-nth($indices, 3);
 
         // Take value from the palette only if it is a number
-        $bg: if( k-meta-type-of($bg-prop) == number, k-get-theme-color-var( #{$source-palette-name}-#{$bg-prop} ), $bg-prop );
-        $text: if( k-meta-type-of($text-prop) == number, k-get-theme-color-var( #{$source-palette-name}-#{$text-prop} ), $text-prop );
-        $border: if( k-meta-type-of($border-prop) == number, k-get-theme-color-var( #{$source-palette-name}-#{$border-prop} ), $border-prop );
+        $bg: if($kendo-enable-color-system, k-get-swatch-color( $bg-prop, $source-palette-name ), if( k-meta-type-of($bg-prop) == number, k-get-theme-color-var( #{$source-palette-name}-#{$bg-prop} ), $bg-prop ));
+        $text: if($kendo-enable-color-system, k-get-swatch-color( $text-prop, $source-palette-name ), if( k-meta-type-of($text-prop) == number, k-get-theme-color-var( #{$source-palette-name}-#{$text-prop} ), $text-prop ));
+        $border: if($kendo-enable-color-system, k-get-swatch-color( $border-prop, $source-palette-name ), if( k-meta-type-of($border-prop) == number, k-get-theme-color-var( #{$source-palette-name}-#{$border-prop} ), $border-prop ));
 
 
         $temp: k-map-deep-merge( $temp, (
@@ -3307,7 +3845,7 @@ $kendo-palettes: (
         // Add outline if provided in the map
         @if ( k-list-length($indices) > 3 ) {
             $outline-prop: k-list-nth($indices, 4);
-            $outline: if( k-meta-type-of($outline-prop) == number, k-get-theme-color-var( #{$source-palette-name}-#{$outline-prop} ), $outline-prop );
+            $outline: if($kendo-enable-color-system, k-get-swatch-color( $outline-prop, $source-palette-name ), if( k-meta-type-of($outline-prop) == number, k-get-theme-color-var( #{$source-palette-name}-#{$outline-prop} ), $outline-prop ));
 
             $temp: k-map-deep-merge( $temp, (
                 #{$prefix}outline: $outline
@@ -3334,6 +3872,18 @@ $kendo-palettes: (
     @return $result;
 }
 
+@function k-hex-to-rgb( $color ) {
+    @if($color) {
+        $r: k-color-red($color);
+        $g: k-color-green($color);
+        $b: k-color-blue($color);
+
+        @return $r, $g, $b;
+    } @else {
+        @return null;
+    }
+}
+
 // #endregion
 // #region @import "./_mixins.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/color-system/_mixins.import.scss
 @mixin k-css-vars($map) {
@@ -3345,204 +3895,294 @@ $kendo-palettes: (
 }
 
 // #endregion
-// #region @import "./_variables.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/color-system/_variables.scss
-// Color constants
-
-/// 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
+// #region @import "./_swatch.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/color-system/_swatch.scss
+// #region @import "./_functions.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/color-system/_functions.import.scss
+// File already imported_once. Skipping output.
+// #endregion
 
-/// 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
+// Config
+$kendo-enable-color-system: false !default;
 
-/// The color transparent.
-/// Note: you cannot change this value.
-/// @type Color
-/// @group color-system
-$kendo-color-rgba-transparent: rgba( 0, 0, 0, 0 ); // stylelint-disable-line scss/dollar-variable-default
+// Colors
+$_default-colors: (
+    // Misc
+    app-surface: null,
+    on-app-surface: null,
+    subtle: null,
+    surface: null,
+    surface-alt: null,
+    border: null,
+    border-alt: null,
+    // Base
+    base-subtle: null,
+    base-subtle-hover: null,
+    base-subtle-active: null,
+    base: null,
+    base-hover: null,
+    base-active: null,
+    base-emphasis: null,
+    base-on-subtle: null,
+    on-base: null,
+    base-on-surface: null,
+    // Primary
+    primary-subtle: null,
+    primary-subtle-hover: null,
+    primary-subtle-active: null,
+    primary: null,
+    primary-hover: null,
+    primary-active: null,
+    primary-emphasis: null,
+    primary-on-subtle: null,
+    on-primary: null,
+    primary-on-surface: null,
+    // Secondary
+    secondary-subtle: null,
+    secondary-subtle-hover: null,
+    secondary-subtle-active: null,
+    secondary: null,
+    secondary-hover: null,
+    secondary-active: null,
+    secondary-emphasis: null,
+    secondary-on-subtle: null,
+    on-secondary: null,
+    secondary-on-surface: null,
+    // Tertiary
+    tertiary-subtle: null,
+    tertiary-subtle-hover: null,
+    tertiary-subtle-active: null,
+    tertiary: null,
+    tertiary-hover: null,
+    tertiary-active: null,
+    tertiary-emphasis: null,
+    tertiary-on-subtle: null,
+    on-tertiary: null,
+    tertiary-on-surface: null,
+    // Info
+    info-subtle: null,
+    info-subtle-hover: null,
+    info-subtle-active: null,
+    info: null,
+    info-hover: null,
+    info-active: null,
+    info-emphasis: null,
+    info-on-subtle: null,
+    on-info: null,
+    info-on-surface: null,
+    // Success
+    success-subtle: null,
+    success-subtle-hover: null,
+    success-subtle-active: null,
+    success: null,
+    success-hover: null,
+    success-active: null,
+    success-emphasis: null,
+    success-on-subtle: null,
+    on-success: null,
+    success-on-surface: null,
+    // Warning
+    warning-subtle: null,
+    warning-subtle-hover: null,
+    warning-subtle-active: null,
+    warning: null,
+    warning-hover: null,
+    warning-active: null,
+    warning-emphasis: null,
+    warning-on-subtle: null,
+    on-warning: null,
+    warning-on-surface: null,
+    // Error
+    error-subtle: null,
+    error-subtle-hover: null,
+    error-subtle-active: null,
+    error: null,
+    error-hover: null,
+    error-active: null,
+    error-emphasis: null,
+    error-on-subtle: null,
+    on-error: null,
+    error-on-surface: null,
+    // Light
+    light-subtle: null,
+    light-subtle-hover: null,
+    light-subtle-active: null,
+    light: null,
+    light-hover: null,
+    light-active: null,
+    light-emphasis: null,
+    light-on-subtle: null,
+    on-light: null,
+    light-on-surface: null,
+    // Dark
+    dark-subtle: null,
+    dark-subtle-hover: null,
+    dark-subtle-active: null,
+    dark: null,
+    dark-hover: null,
+    dark-active: null,
+    dark-emphasis: null,
+    dark-on-subtle: null,
+    on-dark: null,
+    dark-on-surface: null,
+    // Inverse
+    inverse-subtle: null,
+    inverse-subtle-hover: null,
+    inverse-subtle-active: null,
+    inverse: null,
+    inverse-hover: null,
+    inverse-active: null,
+    inverse-emphasis: null,
+    inverse-on-subtle: null,
+    on-inverse: null,
+    inverse-on-surface: null,
+    // Series A
+    series-a: null,
+    series-a-bold: null,
+    series-a-bolder: null,
+    series-a-subtle: null,
+    series-a-subtler: null,
+    // Series B
+    series-b: null,
+    series-b-bold: null,
+    series-b-bolder: null,
+    series-b-subtle: null,
+    series-b-subtler: null,
+    // Series C
+    series-c: null,
+    series-c-bold: null,
+    series-c-bolder: null,
+    series-c-subtle: null,
+    series-c-subtler: null,
+    // Series D
+    series-d: null,
+    series-d-bold: null,
+    series-d-bolder: null,
+    series-d-subtle: null,
+    series-d-subtler: null,
+    // Series Е
+    series-e: null,
+    series-e-bold: null,
+    series-e-bolder: null,
+    series-e-subtle: null,
+    series-e-subtler: null,
+    // Series F
+    series-f: null,
+    series-f-bold: null,
+    series-f-bolder: null,
+    series-f-subtle: null,
+    series-f-subtler: null,
+) !default;
 
-/// A gradient that goes from transparent to black.
-/// Note: you cannot change this value.
-/// @type Gradient
+/// The global default Colors map.
 /// @group color-system
-$kendo-gradient-transparent-to-black: rgba( black, 0 ), black; // stylelint-disable-line scss/dollar-variable-default
+$kendo-colors: $_default-colors !default;
+$kendo-colors: k-map-merge($_default-colors, $kendo-colors);
 
-/// A gradient that goes from transparent to white.
-/// Note: you cannot change this value.
-/// @type Gradient
-/// @group color-system
-$kendo-gradient-transparent-to-white: rgba( white, 0 ), white; // stylelint-disable-line scss/dollar-variable-default
+@function k-color($key, $rgb: false) {
+    $_color: k-map-get($kendo-colors, $key);
 
-/// A gradient that goes from black to transparent.
-/// Note: you cannot change this value.
-/// @type Gradient
-/// @group color-system
-$kendo-gradient-black-to-transparent: black, rgba( black, 0 ); // stylelint-disable-line scss/dollar-variable-default
-
-/// A gradient that goes from white to transparent.
-/// Note: you cannot change this value.
-/// @type Gradient
-/// @group color-system
-$kendo-gradient-white-to-transparent: white, rgba( white, 0 ); // stylelint-disable-line scss/dollar-variable-default
+    @if ($_color) {
+        @if ($rgb) {
+            @return var(--kendo-color-#{$key}-rgb, k-hex-to-rgb($_color));
+        } @else {
+            @return var(--kendo-color-#{$key}, $_color);
+        }
+    } @else {
+        @error "Color Variable \`#{$key}\` does not exists in the color collection.";
+    }
+}
 
-/// A gradient that cycles through the colors of the rainbow.
-/// Note: you cannot change this value.
-/// @type Gradient
-/// @group color-system
-$kendo-gradient-rainbow: #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000; // stylelint-disable-line scss/dollar-variable-default
+@mixin color-system--styles() {
+    :root {
+        @each $key, $value in $kendo-colors {
+            @if($value) {
+                --kendo-color-#{$key}: #{$value};
+                --kendo-color-#{$key}-rgb: #{k-hex-to-rgb($value)};
+            }
+        }
+    }
+}
 
+// #endregion
+// #region @import "./_constants.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/color-system/_constants.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "./_swatch-legacy.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/color-system/_swatch-legacy.scss
+$kendo-is-dark-theme: false !default;
 
 // Root styles
-$kendo-body-bg: $kendo-color-white !default;
-$kendo-body-text: k-get-theme-color-var( neutral-160 ) !default;
+$kendo-body-bg: null !default;
+$kendo-body-text: null !default;
 
 // Component styles
-$kendo-component-bg: $kendo-body-bg !default;
-$kendo-component-text: $kendo-body-text !default;
-$kendo-component-border: k-get-theme-color-var( neutral-30 ) !default;
+$kendo-component-bg: null !default;
+$kendo-component-text: null !default;
+$kendo-component-border: null !default;
 
 // States styles
-$kendo-hover-bg: k-get-theme-color-var( neutral-20 ) !default;
-$kendo-hover-text: k-get-theme-color-var( neutral-190 ) !default;
-$kendo-hover-border: k-get-theme-color-var( neutral-20 ) !default;
+$kendo-hover-bg: null !default;
+$kendo-hover-text: null !default;
+$kendo-hover-border: null !default;
 
-$kendo-selected-bg: k-get-theme-color-var( neutral-30 ) !default;
-$kendo-selected-text: k-get-theme-color-var( neutral-160 ) !default;
-$kendo-selected-border: k-get-theme-color-var( neutral-130 ) !default;
+$kendo-selected-bg: null !default;
+$kendo-selected-text: null !default;
+$kendo-selected-border: null !default;
 
-$kendo-selected-hover-bg: k-get-theme-color-var( neutral-40 ) !default;
-$kendo-selected-hover-text: k-get-theme-color-var( neutral-190 ) !default;
-$kendo-selected-hover-border: k-get-theme-color-var( neutral-130 ) !default;
+$kendo-selected-hover-bg: null !default;
+$kendo-selected-hover-text: null !default;
+$kendo-selected-hover-border: null !default;
 
-$kendo-focus-outline: k-get-theme-color-var( neutral-130 ) !default;
+$kendo-focus-outline: null !default;
 
-$kendo-subtle-text: k-get-theme-color-var( neutral-130 ) !default;
+$kendo-subtle-text: null !default;
 
 // Link
-$kendo-link-text: k-get-theme-color-var( primary-100 ) !default;
-$kendo-link-hover-text: k-get-theme-color-var( primary-120 ) !default;
+$kendo-link-text: null !default;
+$kendo-link-hover-text: null !default;
 
 // Validator
-$kendo-invalid-bg: initial !default;
-$kendo-invalid-text: k-get-theme-color-var( error-190 ) !default;
-$kendo-invalid-border: k-get-theme-color-var( error-190 ) !default;
+$kendo-invalid-bg: null !default;
+$kendo-invalid-text: null !default;
+$kendo-invalid-border: null !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: k-get-theme-color-var( neutral-20 ) !default;
-$kendo-disabled-text: k-get-theme-color-var( neutral-90 ) !default;
-$kendo-disabled-border: transparent !default;
+$kendo-disabled-bg: null !default;
+$kendo-disabled-text: null !default;
+$kendo-disabled-border: null !default;
 
 // Loading
-$kendo-loading-bg: $kendo-component-bg !default;
-$kendo-loading-text: currentColor !default;
-
-
-// Theme colors
-$kendo-theme-colors: (
-    primary: (
-        text: k-get-theme-color-var( primary-130 ),
-        bg: k-get-theme-color-var( primary-20 ),
-        border: k-get-theme-color-var( primary-20 )
-    ),
-    info: (
-        text: k-get-theme-color-var( info-190 ),
-        bg: k-get-theme-color-var( info-20 ),
-        border: k-get-theme-color-var( info-20 )
-    ),
-    success: (
-        text: k-get-theme-color-var( success-190 ),
-        bg: k-get-theme-color-var( success-20 ),
-        border: k-get-theme-color-var( success-20 )
-    ),
-    warning: (
-        text: k-get-theme-color-var( neutral-160 ),
-        bg: k-get-theme-color-var( warning-20 ),
-        border: k-get-theme-color-var( warning-20 )
-    ),
-    error: (
-        text: k-get-theme-color-var( error-190 ),
-        bg: k-get-theme-color-var( error-20 ),
-        border: k-get-theme-color-var( error-20 )
-    )
-) !default;
+$kendo-loading-bg: null !default;
+$kendo-loading-text: null !default;
 
+$kendo-palettes: () !default;
+$kendo-theme-colors: () !default;
 
 @mixin color-system-styles() {
     :root {
-        @include k-css-vars( $kendo-palettes );
-        @include k-css-vars( $kendo-theme-colors );
-
-        --kendo-body-bg: #{$kendo-body-bg};
-        --kendo-body-text: #{$kendo-body-text};
-
-        --kendo-component-bg: #{$kendo-component-bg};
-        --kendo-component-text: #{$kendo-component-text};
-        --kendo-component-border: #{$kendo-component-border};
-
-        --kendo-link-text: #{$kendo-link-text};
-        --kendo-link-hover-text: #{$kendo-link-hover-text};
-
-        --kendo-disabled-bg: #{$kendo-disabled-bg};
-        --kendo-disabled-text: #{$kendo-disabled-text};
-        --kendo-disabled-border: #{$kendo-disabled-border};
-
-        --kendo-hover-bg: #{$kendo-hover-bg};
-        --kendo-hover-text: #{$kendo-hover-text};
-        --kendo-hover-border: #{$kendo-hover-border};
-
-        --kendo-selected-bg: #{$kendo-selected-bg};
-        --kendo-selected-text: #{$kendo-selected-text};
-        --kendo-selected-border: #{$kendo-selected-border};
-
-        --kendo-selected-hover-bg: #{$kendo-selected-hover-bg};
-        --kendo-selected-hover-text: #{$kendo-selected-hover-text};
-        --kendo-selected-hover-border: #{$kendo-selected-hover-border};
-
-        --kendo-focus-outline: #{$kendo-focus-outline};
-
-        --kendo-subtle-text: #{$kendo-subtle-text};
+        @include k-css-vars($kendo-palettes);
+        @include k-css-vars($kendo-theme-colors);
 
-        --kendo-invalid-bg: #{$kendo-invalid-bg};
-        --kendo-invalid-text: #{$kendo-invalid-text};
-        --kendo-invalid-border: #{$kendo-invalid-border};
-        --kendo-invalid-shadow: #{$kendo-invalid-shadow};
+        // Text colors
+        @each $theme-color, $color-props in $kendo-theme-colors {
+            $_color: k-map-get($color-props, text);
 
-        --kendo-border-radius-sm: #{$kendo-border-radius-sm};
-        --kendo-border-radius-md: #{$kendo-border-radius-md};
-        --kendo-border-radius-lg: #{$kendo-border-radius-lg};
-    }
-
-    // Text colors
-    @each $theme-color, $color-props in $kendo-theme-colors {
-        $_color: k-map-get( $color-props, text );
-
-        .k-text-#{$theme-color},
-        .k-color-#{$theme-color} {
-            color: var( --kendo-text-#{$theme-color}, #{$_color} );
-        }
-        .\!k-text-#{$theme-color},
-        .\!k-color-#{$theme-color} {
-            color: var( --kendo-text-#{$theme-color}, #{$_color} ) !important; // stylelint-disable-line declaration-no-important
-        }
+            .k-text-#{$theme-color},
+            .k-color-#{$theme-color} {
+                color: var(--kendo-text-#{$theme-color}, #{$_color});
+            }
+            .\!k-text-#{$theme-color},
+            .\!k-color-#{$theme-color} {
+                color: var(--kendo-text-#{$theme-color}, #{$_color}) !important; // stylelint-disable-line declaration-no-important
+            }
 
-        .k-bg-#{$theme-color} {
-            background-color: var( --kendo-bg-#{$theme-color}, #{$_color} );
-        }
-        .\!k-bg-#{$theme-color} {
-            background-color: var( --kendo-bg-#{$theme-color}, #{$_color} ) !important; // stylelint-disable-line declaration-no-important
+            .k-bg-#{$theme-color} {
+                background-color: var(--kendo-bg-#{$theme-color}, #{$_color});
+            }
+            .\!k-bg-#{$theme-color} {
+                background-color: var(--kendo-bg-#{$theme-color}, #{$_color}) !important; // stylelint-disable-line declaration-no-important
+            }
         }
-    };
+    }
 }
 
 // #endregion
@@ -4945,9 +5585,17 @@ $_imported: () !default;
     }
 }
 // #endregion
+// #region @import "./_colors.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/styles/_colors.scss
+@mixin kendo-core--styles--colors() {
+    @if ($kendo-enable-color-system) {
+        @include color-system--styles();
+    }
+}
 
+// #endregion
 
 @mixin kendo-core--styles() {
+    @include kendo-core--styles--colors();
     @include kendo-core--styles--accessibility();
     @include kendo-core--styles--asp-fallback();
     @include kendo-core--styles--layout();
@@ -5117,6 +5765,73 @@ $kendo-zindex-loading: 100 !default;
 
 // #endregion
 
+// Backward compatibility
+// #region @import "./color-system/_swatch-legacy.scss"; -> scss/core/color-system/_swatch-legacy.scss
+@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: k-color( surface );
+    $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: $kendo-base-border;
+    $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: $kendo-base-border;
+    $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: null;
+    $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,
+    );
+}
+
+// #endregion
+
 // Expose
 @include exports("kendo-core-styles") {
     @include kendo-core--styles();
@@ -14866,11 +15581,19 @@ $kendo-message-box-link-text-decoration: underline !default;
 
     @each $color-name, $color in $kendo-theme-colors {
         .k-messagebox-#{$color-name} {
-            @include fill(
-                k-color-level( $color, $kendo-message-box-text-level ),
-                k-color-level( $color, $kendo-message-box-bg-level ),
-                k-color-level( $color, $kendo-message-box-border-level )
-            );
+            @if $color-name == "inverse" {
+                @include fill(
+                    if($kendo-enable-color-system, k-color( dark-on-subtle ), k-color-level( $color, $kendo-message-box-text-level )),
+                    if($kendo-enable-color-system, k-color( dark-subtle ), k-color-level( $color, $kendo-message-box-bg-level )),
+                    if($kendo-enable-color-system, k-color( dark-hover ), k-color-level( $color, $kendo-message-box-border-level ))
+                );
+            } @else {
+                @include fill(
+                    if($kendo-enable-color-system, k-color( #{$color-name}-on-subtle ), k-color-level( $color, $kendo-message-box-text-level )),
+                    if($kendo-enable-color-system, k-color( #{$color-name}-subtle ), k-color-level( $color, $kendo-message-box-bg-level )),
+                    if($kendo-enable-color-system, k-color( #{$color-name}-emphasis ), k-color-level( $color, $kendo-message-box-border-level ))
+                );
+            }
         }
     }
 
@@ -15512,7 +16235,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;
@@ -15538,7 +16261,7 @@ $kendo-checkbox-focus-shadow: 0 0 0 2px rgba(0, 0, 0, .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
@@ -16313,7 +17036,7 @@ $kendo-checkbox-ripple-opacity: .25 !default;
         &.k-selected:hover,
         &.k-selected.k-hover {
             color: $kendo-list-item-selected-text;
-            background-color: k-color-shade( $kendo-list-item-selected-bg );
+            background-color: if($kendo-enable-color-system, k-color( primary-hover ), k-color-shade( $kendo-list-item-selected-bg ));
         }
     }
 
@@ -17190,10 +17913,9 @@ $kendo-table-group-row-text: $kendo-table-header-text !default;
 /// @group table
 $kendo-table-group-row-border: $kendo-table-header-border !default;
 
-
 /// Background color of alternating rows in table.
 /// @group table
-$kendo-table-alt-row-bg: rgba( k-contrast-legacy( $kendo-table-bg ), .04 ) !default;
+$kendo-table-alt-row-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .05 ), rgba( k-contrast-legacy( $kendo-table-bg ), .04 )) !default;
 /// Text color of alternating rows in table.
 /// @group table
 $kendo-table-alt-row-text: null !default;
@@ -17204,7 +17926,7 @@ $kendo-table-alt-row-border: null !default;
 
 /// Background color of hovered rows in table.
 /// @group table
-$kendo-table-hover-bg: k-color-darken($kendo-table-bg, 7%) !default;
+$kendo-table-hover-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .11 ), k-color-darken($kendo-table-bg, 7%)) !default;
 /// Text color of hovered rows in table.
 /// @group table
 $kendo-table-hover-text: null !default;
@@ -17229,7 +17951,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;
@@ -17892,7 +18614,7 @@ $kendo-avatar-theme-colors: $kendo-theme-colors !default;
     @each $name, $color in $kendo-avatar-theme-colors {
         .k-avatar-solid-#{$name} {
             border-color: $color;
-            color: k-contrast-legacy( $color );
+            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color ));
             background-color: $color;
         }
     }
@@ -18229,7 +18951,7 @@ $kendo-badge-sizes: (
     @each $name, $color in $kendo-theme-colors {
         .k-badge-solid-#{$name} {
             border-color: $color;
-            color: k-contrast-legacy( $color );
+            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color ));
             background-color: $color;
         }
     }
@@ -18411,28 +19133,28 @@ $kendo-button-sizes: (
 /// @group button
 $kendo-button-theme-colors: k-map-merge(
     $kendo-theme-colors,
-    ( "base": #f5f5f5 )
+    ( "base": if($kendo-enable-color-system, k-color( base ), #f5f5f5) )
 ) !default;
 
 /// The base background of the Button.
 /// @group button
-$kendo-button-bg: #f5f5f5 !default;
+$kendo-button-bg: if($kendo-enable-color-system, k-color( base ), #f5f5f5) !default;
 /// The base text color of the Button.
 /// @group button
-$kendo-button-text: #424242 !default;
+$kendo-button-text: if($kendo-enable-color-system, k-color( on-base ), #424242) !default;
 /// The base border color of the Button.
 /// @group button
-$kendo-button-border: rgba( black, .08 ) !default;
+$kendo-button-border: if($kendo-enable-color-system, k-color( border ), rgba( black, .08 )) !default;
 /// The base background gradient of the Button.
 /// @group button
-$kendo-button-gradient: rgba( black, 0 ), rgba( black, .02 ) !default;
+$kendo-button-gradient: if($kendo-enable-color-system, null, (rgba( black, 0 ), rgba( black, .02 ))) !default;
 /// The base shadow of the Button.
 /// @group button
 $kendo-button-shadow: null !default;
 
 /// The base background of the hovered Button.
 /// @group button
-$kendo-button-hover-bg: k-try-shade( $kendo-button-bg, .5 ) !default;
+$kendo-button-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-button-bg, .5 )) !default;
 /// The base text color of the hovered Button.
 /// @group button
 $kendo-button-hover-text: null !default;
@@ -18448,7 +19170,7 @@ $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, 1.5 ) !default;
+$kendo-button-active-bg: if($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-button-bg, 1.5 )) !default;
 /// The base text color of the active Button.
 /// @group button
 $kendo-button-active-text: null !default;
@@ -18467,7 +19189,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;
@@ -18492,7 +19214,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 0 2px rgba( $kendo-button-border, .08 ) !default;
+$kendo-button-focus-shadow: 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08), rgba( $kendo-button-border, .08 )) !default;
 
 /// The base background of the disabled Button.
 /// @group button
@@ -18511,7 +19233,7 @@ $kendo-button-disabled-gradient: null !default;
 $kendo-button-disabled-shadow: null !default;
 
 // Solid Button
-$kendo-solid-button-gradient: rgba( black, 0 ), rgba( black, .02 ) !default;
+$kendo-solid-button-gradient: if($kendo-enable-color-system, null, (rgba( black, 0 ), rgba( black, .02 ))) !default;
 $kendo-solid-button-shade-function: "k-try-shade" !default;
 $kendo-solid-button-shade-text-amount: 0 !default;
 $kendo-solid-button-shade-bg-amount: 0 !default;
@@ -18656,7 +19378,7 @@ $kendo-chip-sizes: (
 
 /// The base background of the Chip.
 /// @group chip
-$kendo-chip-base-bg: $kendo-button-bg !default;
+$kendo-chip-base-bg: if($kendo-enable-color-system, k-color( base-subtle ), $kendo-button-bg) !default;
 
 /// The theme colors map for the Chip.
 /// @group chip
@@ -18679,7 +19401,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, .08 ) ) !default;
+$kendo-chip-solid-shadow: 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) )) !default;
 /// The base gradient of the solid Chip.
 /// @group chip
 $kendo-chip-solid-gradient: $kendo-button-gradient !default;
@@ -18693,7 +19415,7 @@ $kendo-chip-solid-focus-text: null !default;
 
 /// The base background color of the hovered solid Chip.
 /// @group chip
-$kendo-chip-solid-hover-bg: $kendo-button-hover-bg !default;
+$kendo-chip-solid-hover-bg: if($kendo-enable-color-system, k-color( base-subtle-hover ), $kendo-button-hover-bg) !default;
 /// The base text color of the hovered solid Chip.
 /// @group chip
 $kendo-chip-solid-hover-text: null !default;
@@ -18716,14 +19438,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, .08 ) ) !default;
+$kendo-chip-outline-shadow: 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) )) !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 ), k-contrast-legacy( $kendo-chip-outline-hover-bg )) !default;
 
 /// The base background color of the selected outline Chip.
 /// @group chip
@@ -18943,24 +19665,24 @@ $kendo-chip-list-sizes: (
                 }
             } @else {
                 @include fill(
-                    k-try-shade( $color, 65% ),
-                    k-try-tint( $color, 80% ),
-                    k-try-tint( $color, 25% ),
+                    if($kendo-enable-color-system, k-color( #{$name}-on-subtle ), k-try-shade( $color, 65% )),
+                    if($kendo-enable-color-system, k-color( #{$name}-subtle ), k-try-tint( $color, 80% )),
+                    if($kendo-enable-color-system, k-color( #{$name}-emphasis ), k-try-tint( $color, 25% )),
                     $kendo-chip-solid-gradient
                 );
 
                 &:focus,
                 &.k-focus {
-                    @include focus-indicator( 0 0 0 2px rgba( $color, .16 ) );
+                    @include focus-indicator( 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( $name, true ), .16 ), rgba( $color, .16 )) );
                 }
 
                 &:hover,
                 &.k-hover {
-                    @include fill( $bg: k-try-tint($color, 65% ) );
+                    @include fill( $bg: if($kendo-enable-color-system, k-color( #{$name}-subtle-hover ), k-try-tint($color, 65% )) );
                 }
 
                 &.k-selected {
-                    @include fill( $bg: k-try-tint( $color, 50% ) );
+                    @include fill( $bg: if($kendo-enable-color-system, k-color( #{$name}-subtle-active ), k-try-tint( $color, 50% )) );
                 }
             }
         }
@@ -18998,54 +19720,56 @@ $kendo-chip-list-sizes: (
                 }
             } @else if ($name == "warning") {
                 @include fill(
-                    if( $kendo-is-dark-theme, k-color-tint($color, 25%), $kendo-chip-outline-text),
-                    if( $kendo-is-dark-theme, $kendo-color-black, $kendo-color-white ),
-                    if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color)
+                    if($kendo-enable-color-system, $kendo-chip-outline-text, if( $kendo-is-dark-theme, k-color-tint($color, 25%), $kendo-chip-outline-text)),
+                    if($kendo-enable-color-system, k-color( app-surface ), if( $kendo-is-dark-theme, $kendo-color-black, $kendo-color-white )),
+                    if($kendo-enable-color-system, $color, if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color))
                 );
 
                 &:focus,
                 &.k-focus {
-                    @include focus-indicator( 0 0 0 2px if( $kendo-is-dark-theme, rgba( k-color-tint( $color, 50% ), .32 ), rgba( $color, .16 )) );
+                    @include focus-indicator( 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( $name, true ), .16 ), if( $kendo-is-dark-theme, rgba( k-color-tint( $color, 50% ), .32 ), rgba( $color, .16 ))) );
                 }
 
                 &:hover,
                 &.k-hover {
                     @include fill(
-                        $color: if( $kendo-is-dark-theme, k-contrast-legacy( $color ), k-try-shade( $color, 80% ) ) ,
-                        $bg: if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color)
+                        $color: if($kendo-enable-color-system, k-color( on-#{$name} ), if( $kendo-is-dark-theme, k-contrast-legacy( $color ), k-try-shade( $color, 80% ) )),
+                        $bg: if($kendo-enable-color-system, $color, if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color))
                     );
                 }
 
                 &.k-selected {
                     @include fill(
-                        $color: if( $kendo-is-dark-theme, k-contrast-legacy( $color ), k-try-shade( $color, 80% ) ) ,
-                        $bg: if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color)
+                        $color: if($kendo-enable-color-system, k-color( on-#{$name} ), if( $kendo-is-dark-theme, k-contrast-legacy( $color ), k-try-shade( $color, 80% ) )),
+                        $bg: if($kendo-enable-color-system, $color, if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color))
                     );
                 }
             } @else {
                 @include fill(
-                    k-try-shade( $color, 25% ),
-                    if( $kendo-is-dark-theme, $kendo-color-black, $kendo-color-white ),
-                    k-try-shade( $color, 25% )
+                    if($kendo-enable-color-system, k-color( #{$name}-on-surface ), k-try-shade( $color, 25% )),
+                    if($kendo-enable-color-system, k-color( app-surface ), if( $kendo-is-dark-theme, $kendo-color-black, $kendo-color-white )),
+                    if($kendo-enable-color-system, k-color( #{$name}-on-surface ), k-try-shade( $color, 25% ))
                 );
 
                 &:focus,
                 &.k-focus {
-                    @include focus-indicator( 0 0 0 2px if( $kendo-is-dark-theme, rgba( k-color-tint( $color, 50% ), .32 ), rgba( $color, .16 )) );
+                    @include focus-indicator( 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( $name, true ), .16 ), if( $kendo-is-dark-theme, rgba( k-color-tint( $color, 50% ), .32 ), rgba( $color, .16 ))) );
                 }
 
                 &:hover,
                 &.k-hover {
                     @include fill(
-                        $color: k-contrast-legacy( k-try-shade( $color, 25% ) ),
-                        $bg: k-try-shade( $color, 25% )
+                        if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( k-try-shade( $color, 25% ) )),
+                        if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, 25% )),
+                        if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, 25% ))
                     );
                 }
 
                 &.k-selected {
                     @include fill(
-                        $color: k-contrast-legacy( k-try-shade( $color, 25% ) ),
-                        $bg: k-try-shade( $color, 25% )
+                        if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( k-try-shade( $color, 25% ) )),
+                        if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 25% )),
+                        if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 25% ))
                     );
                 }
             }
@@ -20009,11 +20733,8 @@ $kendo-skeleton-rect-border-radius: 0 !default;
 /// @group skeleton
 $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;
-/// The background color of the Skeleton wave animation.
-/// @group skeleton
+$kendo-skeleton-item-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .2 ), rgba( $kendo-color-inverse, .2 )) !default;
+
 $kendo-skeleton-wave-bg: rgba( black, .04 ) !default;
 
 // #endregion
@@ -20677,17 +21398,17 @@ $_kendo-module-meta: (
 
     @each $name, $color in $kendo-button-theme-colors {
         @if ($name != "base") {
-            $_button-text: k-contrast-legacy( $color );
-            $_button-bg: if( $kendo-solid-button-shade-bg-amount, k-meta-call( $_shade-fn, $color, $kendo-solid-button-shade-bg-amount ), null );
-            $_button-border: if( $kendo-solid-button-shade-border-amount, k-meta-call( $_shade-fn, $color, $kendo-solid-button-shade-border-amount ), null );
+            $_button-text: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color ));
+            $_button-bg: if($kendo-enable-color-system, k-color( $name ), if( $kendo-solid-button-shade-bg-amount, k-meta-call( $_shade-fn, $color, $kendo-solid-button-shade-bg-amount ), null ));
+            $_button-border: if($kendo-enable-color-system, k-color( $name ), if( $kendo-solid-button-shade-border-amount, k-meta-call( $_shade-fn, $color, $kendo-solid-button-shade-border-amount ), null ));
 
             $_button-hover-text: null;
-            $_button-hover-bg: if( $kendo-solid-button-hover-shade-bg-amount, k-meta-call( $_shade-fn, $color, $kendo-solid-button-hover-shade-bg-amount ), null );
-            $_button-hover-border: if( $kendo-solid-button-hover-shade-border-amount, k-meta-call( $_shade-fn, $color, $kendo-solid-button-hover-shade-border-amount ), null );
+            $_button-hover-bg: if($kendo-enable-color-system, k-color( #{$name}-hover ), if( $kendo-solid-button-hover-shade-bg-amount, k-meta-call( $_shade-fn, $color, $kendo-solid-button-hover-shade-bg-amount ), null ));
+            $_button-hover-border: if($kendo-enable-color-system, k-color( #{$name}-hover ), if( $kendo-solid-button-hover-shade-border-amount, k-meta-call( $_shade-fn, $color, $kendo-solid-button-hover-shade-border-amount ), null ));
 
             $_button-active-text: null;
-            $_button-active-bg: if( $kendo-solid-button-active-shade-bg-amount, k-meta-call( $_shade-fn, $color, $kendo-solid-button-active-shade-bg-amount ), null );
-            $_button-active-border: if( $kendo-solid-button-active-shade-border-amount, k-meta-call( $_shade-fn, $color, $kendo-solid-button-active-shade-border-amount ), null );
+            $_button-active-bg: if($kendo-enable-color-system, k-color( #{$name}-active ), if( $kendo-solid-button-active-shade-bg-amount, k-meta-call( $_shade-fn, $color, $kendo-solid-button-active-shade-bg-amount ), null ));
+            $_button-active-border: if($kendo-enable-color-system, k-color( #{$name}-active ), if( $kendo-solid-button-active-shade-border-amount, k-meta-call( $_shade-fn, $color, $kendo-solid-button-active-shade-border-amount ), null ));
 
             .k-button-solid-#{$name} {
                 @include fill(
@@ -20711,7 +21432,7 @@ $_kendo-module-meta: (
                 &:focus,
                 &.k-focus {
                     @if ( $kendo-solid-button-shadow ) {
-                        @include focus-indicator( 0 0 $kendo-solid-button-shadow-blur $kendo-solid-button-shadow-spread rgba( $_button-border, $kendo-solid-button-shadow-opacity ), true, true );
+                        @include focus-indicator( 0 0 $kendo-solid-button-shadow-blur $kendo-solid-button-shadow-spread if($kendo-enable-color-system, rgba( k-color( $name, true ), $kendo-solid-button-shadow-opacity ), rgba( $_button-border, $kendo-solid-button-shadow-opacity )), true, true );
                     }
                 }
 
@@ -20755,44 +21476,72 @@ $_kendo-module-meta: (
         .k-button-outline-#{$name} {
             @include box-shadow( none );
             border-color: currentColor;
-            color: $color;
+            color: if($kendo-enable-color-system, k-color( #{$name}-on-surface ), $color);
             background-color: transparent;
 
             // Hover state
             &:hover,
             &.k-hover {
-                @include fill(
-                    k-contrast-legacy( $color ),
-                    $color,
-                    $color
-                );
+                @if $name == "base" {
+                    @include fill(
+                        if($kendo-enable-color-system, $kendo-base-bg, k-contrast-legacy( $color )),
+                        $color,
+                        $color
+                    );
+                } @else {
+                    @include fill(
+                        if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )),
+                        $color,
+                        $color
+                    );
+                }
             }
 
             // Focus state
             &:focus,
             &.k-focus {
                 @if $kendo-outline-button-shadow {
-                    @include focus-indicator( 0 0 $kendo-outline-button-shadow-blur $kendo-outline-button-shadow-spread rgba( $color, $kendo-outline-button-shadow-opacity ), true, true );
+                    @if $name == "base" {
+                        @include focus-indicator( 0 0 $kendo-outline-button-shadow-blur $kendo-outline-button-shadow-spread if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), $kendo-outline-button-shadow-opacity ), rgba( $color, $kendo-outline-button-shadow-opacity )), true, true );
+                    } @else {
+                        @include focus-indicator( 0 0 $kendo-outline-button-shadow-blur $kendo-outline-button-shadow-spread if($kendo-enable-color-system, rgba( k-color( $name, true ), $kendo-outline-button-shadow-opacity ), rgba( $color, $kendo-outline-button-shadow-opacity )), true, true );
+                    }
                 }
             }
 
             // Active state
             &:active,
             &.k-active {
-                @include fill(
-                    k-contrast-legacy( $color ),
-                    $color,
-                    $color
-                );
+                @if $name == "base" {
+                    @include fill(
+                        if($kendo-enable-color-system, $kendo-base-bg, k-contrast-legacy( $color )),
+                        $color,
+                        $color
+                    );
+                } @else {
+                    @include fill(
+                        if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )),
+                        $color,
+                        $color
+                    );
+                }
             }
 
             // Selected
             &.k-selected {
-                @include fill(
-                    k-contrast-legacy( $color ),
-                    $color,
-                    $color
-                );
+                @if $name == "base" {
+                    @include fill(
+                        if($kendo-enable-color-system, $kendo-base-bg, k-contrast-legacy( $color )),
+                        $color,
+                        $color
+                    );
+                } @else {
+                    @include fill(
+                        if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )),
+                        $color,
+                        $color
+                    );
+                }
             }
 
             // Disabled state
@@ -20826,26 +21575,42 @@ $_kendo-module-meta: (
             // Hover
             &:hover,
             &.k-hover {
-                color: k-try-shade( $color, 2 );
+                @if $name == "base" {
+                    color: if($kendo-enable-color-system, $kendo-base-text, k-try-shade( $color, 2 ));
+                } @else {
+                    color: if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, 2 ));
+                }
             }
 
             // Focus
             &:focus,
             &.k-focus {
                 @if ( $kendo-link-button-shadow ) {
-                    @include focus-indicator( 0 0 $kendo-link-button-shadow-blur $kendo-link-button-shadow-spread rgba( $color, $kendo-link-button-shadow-opacity ), true, true );
+                    @if $name == "base" {
+                        @include focus-indicator( 0 0 $kendo-link-button-shadow-blur $kendo-link-button-shadow-spread if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), $kendo-link-button-shadow-opacity ), rgba( $color, $kendo-link-button-shadow-opacity )), true, true );
+                    } @else {
+                        @include focus-indicator( 0 0 $kendo-link-button-shadow-blur $kendo-link-button-shadow-spread if($kendo-enable-color-system, rgba( k-color( $name, true ), $kendo-link-button-shadow-opacity ), rgba( $color, $kendo-link-button-shadow-opacity )), true, true );
+                    }
                 }
             }
 
             // Active
             &:active,
             &.k-active {
-                color: k-try-shade( $color, 2 );
+                @if $name == "base" {
+                    color: if($kendo-enable-color-system, $kendo-base-text, k-try-shade( $color, 2 ));
+                } @else {
+                    color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 2 ));
+                }
             }
 
             // Selected
             &.k-selected {
-                color: k-try-shade( $color, 2 );
+                @if $name == "base" {
+                    color: if($kendo-enable-color-system, $kendo-base-text, k-try-shade( $color, 2 ));
+                } @else {
+                    color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 2 ));
+                }
             }
 
             // Disabled state
@@ -20891,7 +21656,6 @@ $_kendo-module-meta: (
 @mixin kendo-button--theme() {
     @include kendo-button--theme-base();
 }
-
 // #endregion
 
 
@@ -22407,7 +23171,7 @@ $kendo-input-hover-bg: null !default;
 $kendo-input-hover-text: null !default;
 /// The border color of the hovered Input components.
 /// @group input
-$kendo-input-hover-border: rgba( $kendo-input-border, .16 ) !default;
+$kendo-input-hover-border: if($kendo-enable-color-system, k-color( border-alt ), rgba( $kendo-input-border, .16 )) !default;
 /// The shadow of the hovered Input components.
 /// @group input
 $kendo-input-hover-shadow: null !default;
@@ -22423,7 +23187,7 @@ $kendo-input-focus-text: null !default;
 $kendo-input-focus-border: $kendo-input-hover-border !default;
 /// The shadow of the focused Input components.
 /// @group input
-$kendo-input-focus-shadow: 0 0 0 2px rgba( $kendo-input-focus-border, .08 ) !default;
+$kendo-input-focus-shadow: 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), rgba( $kendo-input-focus-border, .08 )) !default;
 
 /// The background color of the selected Input components.
 /// @group input
@@ -22456,7 +23220,7 @@ $kendo-input-outline-bg: null !default;
 $kendo-input-outline-text: $kendo-input-text !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-base, true ), .5 ), rgba( $kendo-button-text, .5)) !default;
 
 /// The background color of the outline hovered Input components.
 /// @group input
@@ -22466,7 +23230,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-base, true ), .8 ), rgba( $kendo-button-text, .8)) !default;
 
 /// The background color of the outline focused Input components.
 /// @group input
@@ -22661,14 +23425,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-base, 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-legacy( $kendo-picker-outline-hover-bg ) !default;
+$kendo-picker-outline-hover-text: if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $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;
@@ -22708,13 +23472,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-base, 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, k-color( border-alt ), rgba( $kendo-button-border, .16 )) !default;
 
 /// The background color of the flat focused Picker components.
 /// @group picker
@@ -22779,10 +23543,10 @@ $kendo-tooltip-callout-size: 6px !default;
 
 /// The default background of the Tooltip.
 /// @group tooltip
-$kendo-tooltip-bg: rgba( k-contrast-legacy( $kendo-body-bg ), .75 ) !default;
+$kendo-tooltip-bg: if($kendo-enable-color-system, k-color( on-app-surface ), rgba( k-contrast-legacy( $kendo-body-bg ), .75 )) !default;
 /// The default text color of the Tooltip.
 /// @group tooltip
-$kendo-tooltip-text: k-contrast-legacy( $kendo-tooltip-bg ) !default;
+$kendo-tooltip-text: if($kendo-enable-color-system, k-color( app-surface ), k-contrast-legacy( $kendo-tooltip-bg )) !default;
 /// The default border color of the Tooltip.
 /// @group tooltip
 $kendo-tooltip-border: $kendo-tooltip-bg !default;
@@ -22796,7 +23560,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 );
@@ -22811,6 +23575,7 @@ $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;
+
 // #endregion
 // #region @import "../typography/_variables.scss"; -> scss/typography/_variables.scss
 // File already imported_once. Skipping output.
@@ -23080,7 +23845,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;
@@ -24542,9 +25307,7 @@ $_kendo-module-meta: (
         }
 
         // Valid
-        &.k-valid,
-        &.ng-valid.ng-touched,
-        &.ng-valid.ng-dirty {
+        &.k-valid {
             @include fill( $border: $kendo-input-valid-border );
 
             .k-input-validation-icon {
@@ -24650,9 +25413,7 @@ $_kendo-module-meta: (
         }
 
         // Valid
-        &.k-valid,
-        &.ng-valid.ng-touched,
-        &.ng-valid.ng-dirty {
+        &.k-valid {
             @include fill( $border: $kendo-input-valid-border );
 
             .k-input-validation-icon {
@@ -24753,9 +25514,7 @@ $_kendo-module-meta: (
         }
 
         // Valid
-        &.k-valid,
-        &.ng-valid.ng-touched,
-        &.ng-valid.ng-dirty {
+        &.k-valid {
             @include fill( $border: $kendo-input-valid-border );
 
             .k-input-validation-icon {
@@ -24867,9 +25626,7 @@ $_kendo-module-meta: (
         }
 
         // Valid
-        &.k-valid,
-        &.ng-valid.ng-touched,
-        &.ng-valid.ng-dirty {
+        &.k-valid {
             @include fill( $border: $kendo-input-valid-border );
 
             .k-input-validation-icon {
@@ -24957,9 +25714,7 @@ $_kendo-module-meta: (
         }
 
         // Valid
-        &.k-valid,
-        &.ng-valid.ng-touched,
-        &.ng-valid.ng-dirty {
+        &.k-valid {
             @include fill( $border: $kendo-input-valid-border );
 
             .k-input-validation-icon {
@@ -25071,9 +25826,7 @@ $_kendo-module-meta: (
         }
 
         // Valid
-        &.k-valid,
-        &.ng-valid.ng-touched,
-        &.ng-valid.ng-dirty {
+        &.k-valid {
             @include fill( $border: $kendo-input-valid-border );
 
             .k-input-validation-icon {
@@ -26055,7 +26808,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-subtle ), k-try-shade( $kendo-component-bg, 1 )) !default;
 /// The text color of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-text: $kendo-component-text !default;
@@ -26071,10 +26824,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;
@@ -26386,7 +27139,7 @@ $kendo-circular-progressbar-scale-stroke: $kendo-progressbar-bg !default;
 
     .k-progressbar-indeterminate {
         @include fill( $kendo-progressbar-indeterminate-text, $kendo-progressbar-indeterminate-bg, $kendo-progressbar-indeterminate-border );
-        @include striped-gradient( k-color-shade($kendo-progressbar-indeterminate-bg) );
+        @include striped-gradient( if($kendo-enable-color-system, rgba( k-color( base-emphasis, true ), .55 ), k-color-shade($kendo-progressbar-indeterminate-bg)) );
         background-size: $kendo-progressbar-height $kendo-progressbar-height;
         animation: kendo-progressbar-indeterminate-animation $kendo-progressbar-animation-timing;
     }
@@ -27055,28 +27808,28 @@ $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-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-color-primary )) !default;
 $kendo-slider-draghandle-border: $kendo-color-primary !default;
 $kendo-slider-draghandle-gradient: null !default;
 
-$kendo-slider-draghandle-hover-bg: k-try-shade( $kendo-color-primary , .5 ) !default;
+$kendo-slider-draghandle-hover-bg: if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-color-primary , .5 )) !default;
 $kendo-slider-draghandle-hover-text: null !default;
 $kendo-slider-draghandle-hover-border: $kendo-color-primary !default;
 $kendo-slider-draghandle-hover-gradient: null !default;
 
-$kendo-slider-draghandle-pressed-bg: k-try-shade( $kendo-color-primary , 1.5 ) !default;
+$kendo-slider-draghandle-pressed-bg: if($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-color-primary , 1.5 )) !default;
 $kendo-slider-draghandle-pressed-text: null !default;
-$kendo-slider-draghandle-pressed-border: k-try-shade( $kendo-color-primary , 1.5 ) !default;
+$kendo-slider-draghandle-pressed-border: if($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-color-primary , 1.5 )) !default;
 $kendo-slider-draghandle-pressed-gradient: null !default;
 
-$kendo-slider-draghandle-focus-shadow: 0 0 0 2px rgba( $kendo-color-primary , .3 ) !default;
+$kendo-slider-draghandle-focus-shadow: 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( primary, true ), .3 ), rgba( $kendo-color-primary , .3 )) !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-subtle ), k-try-shade( $kendo-component-bg, 1 )) !default;
 $kendo-slider-selection-bg: $kendo-color-primary !default;
 $kendo-slider-disabled-opacity: null !default;
 
@@ -28460,7 +29213,7 @@ $kendo-calendar-sizes: (
     .k-calendar { // stylelint-disable-line
 
         $kendo-calendar-range-gap: 1px !default;
-        $kendo-calendar-range-bg: rgba( $kendo-calendar-cell-selected-bg, .25 );
+        $kendo-calendar-range-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-calendar-cell-selected-bg, .25 ));
         $kendo-calendar-range-split-size: 5px !default;
 
         .k-range-start,
@@ -32715,7 +33468,7 @@ $kendo-switch-off-track-bg: $kendo-component-bg !default;
 $kendo-switch-off-track-text: $kendo-component-text !default;
 /// The border color of the track when the Switch is not checked.
 /// @group switch
-$kendo-switch-off-track-border: k-try-shade( $kendo-switch-off-track-bg, 8% ) !default;
+$kendo-switch-off-track-border: if($kendo-enable-color-system, k-color( border ), k-try-shade( $kendo-switch-off-track-bg, 8% )) !default;
 /// The background gradient of the track when the Switch is not checked.
 /// @group switch
 $kendo-switch-off-track-gradient: null !default;
@@ -32747,7 +33500,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: 2px solid rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ) , .08 ) !default;
+$kendo-switch-off-track-focus-ring: 2px solid if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ) , .08 )) !default;
 
 /// The background of the track when the disabled Switch is not checked.
 /// @group switch
@@ -32794,7 +33547,7 @@ $kendo-switch-off-thumb-hover-gradient: null !default;
 $kendo-switch-on-track-bg: $kendo-color-primary !default;
 /// The text color of the track when the Switch is checked.
 /// @group switch
-$kendo-switch-on-track-text: k-contrast-legacy( $kendo-switch-on-track-bg ) !default;
+$kendo-switch-on-track-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-switch-on-track-bg )) !default;
 /// The border color of the track when the Switch is checked.
 /// @group switch
 $kendo-switch-on-track-border: $kendo-switch-on-track-bg !default;
@@ -32829,7 +33582,7 @@ $kendo-switch-on-track-focus-border: null !default;
 $kendo-switch-on-track-focus-gradient: null !default;
 /// The ring around the track when the focused Switch is checked.
 /// @group switch
-$kendo-switch-on-track-focus-ring: 2px solid rgba( $kendo-switch-on-track-border, .25 ) !default;
+$kendo-switch-on-track-focus-ring: 2px solid if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-switch-on-track-border, .25 )) !default;
 
 /// The background of the track when the disabled Switch is checked.
 /// @group switch
@@ -33094,7 +33847,7 @@ $kendo-switch-on-thumb-hover-gradient: null !default;
                     $kendo-switch-off-track-focus-gradient
                 );
                 @if $kendo-enable-focus-contrast {
-                    @include box-shadow( 0 0 0 2px if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ) );
+                    @include box-shadow( 0 0 0 2px if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )) );
                 } @else {
                     outline: $kendo-switch-off-track-focus-ring;
                 }
@@ -33174,7 +33927,7 @@ $kendo-switch-on-thumb-hover-gradient: null !default;
                     $kendo-switch-on-track-focus-gradient
                 );
                 @if $kendo-enable-focus-contrast {
-                    @include box-shadow( 0 0 0 2px if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ) );
+                    @include box-shadow( 0 0 0 2px if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )) );
                 } @else {
                     outline: $kendo-switch-on-track-focus-ring;
                 }
@@ -33327,7 +34080,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;
@@ -34027,14 +34780,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-legacy( $kendo-color-light ) !default;
+$kendo-appbar-light-text: if($kendo-enable-color-system, k-color( on-light ), k-contrast-legacy( $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 color.
 /// @group appbar
-$kendo-appbar-dark-text: k-contrast-legacy( $kendo-color-dark ) !default;
+$kendo-appbar-dark-text: if($kendo-enable-color-system, k-color( on-dark ), k-contrast-legacy( $kendo-color-dark )) !default;
 
 /// The box shadow of the AppBar.
 /// @group appbar
@@ -34185,7 +34938,7 @@ $kendo-appbar-bottom-box-shadow: $kendo-appbar-box-shadow !default;
                 color: $kendo-appbar-dark-text;
                 background-color: $kendo-appbar-dark-bg;
             } @else {
-                color: k-contrast-legacy( $color );
+                color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color ));
                 background-color: $color;
             }
         }
@@ -34591,7 +35344,7 @@ $kendo-fab-item-outline-color: rgba(0, 0, 0, .08) !default;
             outline: $kendo-fab-border-width $kendo-fab-outline-style $color;
             outline-offset: -$kendo-fab-border-width;
             border-color: $color;
-            color: k-contrast-legacy( $color );
+            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color ));
             background-color: $color;
         }
     }
@@ -34600,8 +35353,8 @@ $kendo-fab-item-outline-color: rgba(0, 0, 0, .08) !default;
     @each $name, $color in $kendo-fab-theme-colors {
         .k-hover.k-fab-solid-#{$name},
         .k-fab-solid-#{$name}:hover {
-            border-color: k-try-shade( $color, .5 );
-            background-color: k-try-shade( $color, .5 );
+            border-color: if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, .5 ));
+            background-color: if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, .5 ));
         }
     }
 
@@ -34612,7 +35365,7 @@ $kendo-fab-item-outline-color: rgba(0, 0, 0, .08) !default;
             @if $kendo-enable-focus-contrast {
                 @include box-shadow( inset 0 0 0 2px currentColor );
             } @else {
-                outline: $kendo-fab-outline-style $kendo-fab-outline-width rgba( $color, .3 );
+                outline: $kendo-fab-outline-style $kendo-fab-outline-width if($kendo-enable-color-system, rgba( k-color( $name, true ), .3 ), rgba( $color, .3 ));
             }
         }
     }
@@ -34623,8 +35376,8 @@ $kendo-fab-item-outline-color: rgba(0, 0, 0, .08) !default;
         .k-selected.k-fab-solid-#{$name},
         .k-fab-solid-#{$name}:active {
             @include box-shadow($kendo-fab-active-shadow);
-            border-color: k-try-shade( $color, 1.5);
-            background-color: k-try-shade( $color, 1.5);
+            border-color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 1.5));
+            background-color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 1.5));
         }
     }
 
@@ -34633,8 +35386,8 @@ $kendo-fab-item-outline-color: rgba(0, 0, 0, .08) !default;
         .k-disabled.k-fab-solid-#{$name},
         .k-fab-solid-#{$name}:disabled {
             @include box-shadow($kendo-fab-disabled-shadow);
-            background-color: k-try-tint( $color, 5 );
-            color: k-try-tint( k-contrast-legacy( $color ), 5 );
+            background-color: if($kendo-enable-color-system, rgba( k-color( $name, true ), .6 ), k-try-tint( $color, 5 ));
+            color: if($kendo-enable-color-system, rgba( k-color( on-#{$name}, true ), .6 ), k-try-tint( k-contrast-legacy( $color ), 5 ));
             opacity: 1;
         }
     }
@@ -34663,8 +35416,8 @@ $kendo-fab-item-outline-color: rgba(0, 0, 0, .08) !default;
     // Hover state
     .k-fab-item.k-hover .k-fab-item-icon,
     .k-fab-item:hover .k-fab-item-icon {
-        border-color: k-try-shade( $kendo-fab-item-icon-border, .5 );
-        background-color: k-try-shade( $kendo-fab-item-icon-bg, .5 );
+        border-color: if($kendo-enable-color-system, k-color( border ), k-try-shade( $kendo-fab-item-icon-border, .5 ));
+        background-color: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-fab-item-icon-bg, .5 ));
     }
 
     // Focus state
@@ -34673,7 +35426,7 @@ $kendo-fab-item-outline-color: rgba(0, 0, 0, .08) !default;
     .k-fab-item.k-focus .k-fab-item-text,
     .k-fab-item.k-focus .k-fab-item-icon {
         @if $kendo-enable-focus-contrast {
-            @include box-shadow( inset 0 0 0 2px if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ) );
+            @include box-shadow( inset 0 0 0 2px if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )) );
         } @else {
             outline: $kendo-fab-item-outline-style $kendo-fab-item-outline-width $kendo-fab-item-outline-color;
         }
@@ -34683,8 +35436,8 @@ $kendo-fab-item-outline-color: rgba(0, 0, 0, .08) !default;
     .k-fab-item.k-active .k-fab-item-icon,
     .k-fab-item:active .k-fab-item-icon {
         @include box-shadow($kendo-fab-item-active-shadow);
-        border-color: k-try-shade( $kendo-fab-item-icon-border, 1);
-        background-color: k-try-shade( $kendo-fab-item-icon-bg, 1);
+        border-color: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-fab-item-icon-border, 1 ));
+        background-color: if($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-fab-item-icon-bg, 1 ));
     }
 
     // Disabled state
@@ -34695,8 +35448,8 @@ $kendo-fab-item-outline-color: rgba(0, 0, 0, .08) !default;
         .k-fab-item-text,
         .k-fab-item-icon {
             @include box-shadow($kendo-fab-item-disabled-shadow);
-            background-color: k-try-tint( $kendo-fab-item-bg, 5 );
-            color: k-try-tint( $kendo-fab-item-text, 5 );
+            background-color: if($kendo-enable-color-system, rgba( k-color( base, true ), .6 ), k-try-tint( $kendo-fab-item-bg, 5 ));
+            color: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .6 ), k-try-tint( $kendo-fab-item-text, 5 ));
         }
     }
 
@@ -35650,7 +36403,7 @@ $_kendo-module-meta: (
     // Window theme colors
     @each $name, $color in $kendo-window-theme-colors {
         .k-window-#{$name} .k-window-titlebar {
-            color: k-contrast-legacy( $color );
+            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color ));
             background-color: $color;
         }
     }
@@ -35815,7 +36568,7 @@ $kendo-dialog-theme-colors: (
     // Dialog theme colors
     @each $name, $color in $kendo-dialog-theme-colors {
         .k-dialog-#{$name} .k-dialog-titlebar {
-            color: k-contrast-legacy( $color );
+            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color ));
             background-color: $color;
         }
     }
@@ -36353,7 +37106,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 );
@@ -36942,6 +37695,10 @@ $kendo-card-callout-height: 20px !default;
         gap: $kendo-card-actions-gap;
     }
 
+    .k-card-horizontal .k-actions-horizontal {
+        width: auto;
+    }
+
     // List
     .k-card-list {
         display: flex;
@@ -37158,9 +37915,9 @@ $kendo-card-callout-height: 20px !default;
     // Card theme colors
     @each $name, $color in $kendo-theme-colors {
         .k-card-#{$name} {
-            background-color: k-color-tint($color, 10);
-            color: k-color-shade($color, 6);
-            border-color: k-color-tint($color, 9);
+            background-color: if($kendo-enable-color-system, k-color( #{$name}-subtle ), k-color-tint($color, 10));
+            color: if($kendo-enable-color-system, k-color( #{$name}-on-subtle ), k-color-shade($color, 6));
+            border-color: if($kendo-enable-color-system, k-color( #{$name}-emphasis ), k-color-tint($color, 9));
 
             .k-card-subtitle {
                 color: inherit;
@@ -37834,17 +38591,17 @@ $kendo-bottom-nav-flat-border: $kendo-component-border !default;
     @each $name, $color in $kendo-theme-colors {
         .k-bottom-nav-solid-#{$name} {
             @include fill(
-                $color: k-true-mix( $color, k-contrast-legacy( $color ), 35%),
+                $color: if($kendo-enable-color-system, rgba( k-color( on-#{$name}, true ), .65 ), k-true-mix( $color, k-contrast-legacy( $color ), 35%)),
                 $bg: $color
             );
 
             .k-bottom-nav-item.k-focus,
             .k-bottom-nav-item:focus {
-                @include fill( $bg: rgba(k-true-mix( $color, k-contrast-legacy( $color ), 35%), .2));
+                @include fill( $bg: if($kendo-enable-color-system, rgba( k-color( on-#{$name}, true ), .125 ), rgba(k-true-mix( $color, k-contrast-legacy( $color ), 35%), .2)));
             }
 
             .k-bottom-nav-item.k-selected {
-                @include fill( $color: k-contrast-legacy( $color ) );
+                @include fill( $color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )) );
             }
         }
         // TODO: remove when suites update class names
@@ -37864,12 +38621,12 @@ $kendo-bottom-nav-flat-border: $kendo-component-border !default;
 
             .k-bottom-nav-item.k-focus,
             .k-bottom-nav-item:focus {
-                @include fill( $bg: rgba($kendo-bottom-nav-flat-text, .05) );
+                @include fill( $bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .05), rgba($kendo-bottom-nav-flat-text, .05)) );
             }
 
             .k-bottom-nav-item.k-selected {
                 @if $name == "secondary" or $name == "light" {
-                    @include fill( $color: k-try-shade($color, 3) );
+                    @include fill( $color: if($kendo-enable-color-system, k-color( #{$name} ), k-try-shade($color, 3)) );
                 } @else {
                     @include fill( $color: $color );
                 }
@@ -38951,24 +39708,24 @@ $kendo-stepper-indicator-bg: $kendo-component-bg !default;
 $kendo-stepper-indicator-text: $kendo-component-text !default;
 $kendo-stepper-indicator-border: #cccccc !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-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;
@@ -38986,8 +39743,8 @@ $kendo-stepper-indicator-current-disabled-border: $kendo-stepper-indicator-done-
 $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: k-try-shade( $kendo-stepper-text, 2 ) !default;
-$kendo-stepper-label-disabled-text: $kendo-disabled-text !default;
+$kendo-stepper-label-hover-text: if($kendo-enable-color-system, k-color( on-base ), k-try-shade( $kendo-stepper-text, 2 )) !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;
@@ -39081,6 +39838,17 @@ $kendo-stepper-content-transition-timing-function: cubic-bezier(.4, 0, .2, 1) 0m
             transition-duration: .4s;
             transition-timing-function: ease-in-out;
 
+            &::before {
+                @include border-radius( $kendo-stepper-indicator-border-radius );
+                content: "";
+                width: 100%;
+                height: 100%;
+                position: absolute;
+                top: 0;
+                left: 0;
+                z-index: -1;
+            }
+
             &::after {
                 @include border-radius( 100% );
                 content: "";
@@ -39333,11 +40101,23 @@ $kendo-stepper-content-transition-timing-function: cubic-bezier(.4, 0, .2, 1) 0m
             &.k-disabled,
             &:disabled {
                 .k-step-indicator {
-                    @include fill(
-                        $kendo-stepper-indicator-disabled-text,
-                        $kendo-stepper-indicator-disabled-bg,
-                        $kendo-stepper-indicator-disabled-border
-                    );
+                    @if($kendo-enable-color-system) {
+                        @include fill(
+                            $kendo-stepper-indicator-disabled-text,
+                            k-color( app-surface ),
+                            $kendo-stepper-indicator-disabled-border
+                        );
+                        
+                        &::before {
+                            background-color: $kendo-stepper-indicator-disabled-bg;
+                        }
+                    } @else {
+                        @include fill(
+                            $kendo-stepper-indicator-disabled-text,
+                            $kendo-stepper-indicator-disabled-bg,
+                            $kendo-stepper-indicator-disabled-border
+                        );
+                    }
                 }
 
                 .k-step-label {
@@ -39395,11 +40175,23 @@ $kendo-stepper-content-transition-timing-function: cubic-bezier(.4, 0, .2, 1) 0m
             &.k-disabled,
             &:disabled {
                 .k-step-indicator {
-                    @include fill(
-                        $kendo-stepper-indicator-done-disabled-text,
-                        $kendo-stepper-indicator-done-disabled-bg,
-                        $kendo-stepper-indicator-done-disabled-border
-                    );
+                    @if($kendo-enable-color-system) {
+                        @include fill(
+                            $kendo-stepper-indicator-done-disabled-text,
+                            k-color( app-surface ),
+                            $kendo-stepper-indicator-done-disabled-border
+                        );
+                        
+                        &::before {
+                            background-color: $kendo-stepper-indicator-done-disabled-bg;
+                        }
+                    } @else {
+                        @include fill(
+                            $kendo-stepper-indicator-done-disabled-text,
+                            $kendo-stepper-indicator-done-disabled-bg,
+                            $kendo-stepper-indicator-done-disabled-border
+                        );
+                    }
                 }
             }
         }
@@ -39436,11 +40228,23 @@ $kendo-stepper-content-transition-timing-function: cubic-bezier(.4, 0, .2, 1) 0m
             &.k-disabled,
             &:disabled {
                 .k-step-indicator {
-                    @include fill(
-                        $kendo-stepper-indicator-current-disabled-text,
-                        $kendo-stepper-indicator-current-disabled-bg,
-                        $kendo-stepper-indicator-current-disabled-border
-                    );
+                    @if($kendo-enable-color-system) {
+                        @include fill(
+                            $kendo-stepper-indicator-current-disabled-text,
+                            k-color( app-surface ),
+                            $kendo-stepper-indicator-current-disabled-border
+                        );
+                        
+                        &::before {
+                            background-color: $kendo-stepper-indicator-current-disabled-bg;
+                        }
+                    } @else {
+                        @include fill(
+                            $kendo-stepper-indicator-current-disabled-text,
+                            $kendo-stepper-indicator-current-disabled-bg,
+                            $kendo-stepper-indicator-current-disabled-border
+                        );
+                    }
                 }
             }
         }
@@ -40758,7 +41562,7 @@ $kendo-panelbar-header-text: $kendo-link-text !default;
 $kendo-panelbar-header-border: null !default;
 $kendo-panelbar-header-gradient: null !default;
 
-$kendo-panelbar-header-hover-bg: k-try-shade( $kendo-panelbar-header-bg, .5 ) !default;
+$kendo-panelbar-header-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-panelbar-header-bg, .5 )) !default;
 $kendo-panelbar-header-hover-text: null !default;
 $kendo-panelbar-header-hover-border: null !default;
 $kendo-panelbar-header-hover-gradient: null !default;
@@ -40779,7 +41583,7 @@ $kendo-panelbar-header-selected-text: $kendo-selected-text !default;
 $kendo-panelbar-header-selected-border: null !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;
@@ -40794,7 +41598,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-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;
@@ -40815,7 +41619,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;
@@ -41290,7 +42094,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-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;
@@ -41873,7 +42677,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;
@@ -42269,7 +43073,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;
 
@@ -43198,7 +44002,7 @@ $kendo-grid-grouping-row-bg: $kendo-base-bg !default;
 $kendo-grid-grouping-row-text: $kendo-grid-text !default;
 
 $kendo-grid-sorted-icon-spacing: calc( #{$kendo-padding-md-x} - 1px ) !default;
-$kendo-grid-sorted-bg: rgba( k-contrast-legacy( $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-legacy( $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;
@@ -43212,11 +44016,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-component-bg !default;
 $kendo-grid-sticky-text: $kendo-grid-text !default;
 $kendo-grid-sticky-border: rgba( black, .3 ) !default;
 
-$kendo-grid-sticky-alt-bg: k-color-shade($kendo-grid-bg, 3.5%) !default;
+// Must be a solid color
+$kendo-grid-sticky-alt-bg: if($kendo-enable-color-system, k-color( base ), k-color-shade($kendo-grid-bg, 3.5%)) !default;
 
 $kendo-grid-sticky-header-bg: $kendo-grid-header-bg !default;
 $kendo-grid-sticky-header-text: $kendo-grid-header-text !default;
@@ -43225,11 +44031,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-color-shade($kendo-grid-sticky-selected-bg, .4) !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 ), .24 ), k-color-shade($kendo-grid-sticky-selected-bg, .4)) !default;
 
-$kendo-grid-sticky-hover-bg: k-color-darken($kendo-grid-bg, 8%) !default;
-$kendo-grid-sticky-selected-hover-bg: k-color-shade($kendo-grid-sticky-selected-bg, .7) !default;
+// Must be a solid color
+$kendo-grid-sticky-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-color-darken($kendo-grid-bg, 8%)) !default;
+$kendo-grid-sticky-selected-hover-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .24 ), k-color-shade($kendo-grid-sticky-selected-bg, .7)) !default;
 
 $kendo-grid-column-menu-width: 230px !default;
 $kendo-grid-column-menu-max-width: 320px !default;
@@ -43280,7 +44087,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;
@@ -44070,6 +44877,16 @@ $kendo-grid-row-resizer-height: k-map-get( $kendo-spacing, .5 ) !default;
         }
     }
 
+    .k-master-row .k-grid-content-sticky::before {
+        content: "";
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: -1;
+    }
+
     kendo-grid {
         .k-table-row.k-grid-row-sticky {
             border: 0;
@@ -44919,14 +45736,30 @@ $kendo-grid-row-resizer-height: k-map-get( $kendo-spacing, .5 ) !default;
         &.k-table-row.k-selected .k-table-td.k-grid-row-sticky,
         &.k-table-row td.k-grid-content-sticky.k-selected,
         &.k-table-row .k-table-td.k-grid-content-sticky.k-selected {
-            @include fill( $bg: $kendo-grid-sticky-selected-bg );
+            @if($kendo-enable-color-system) {
+                @include fill( $bg: $kendo-grid-sticky-bg );
+
+                &::before {
+                    @include fill( $bg: $kendo-grid-sticky-selected-bg );
+                }
+            } @else {
+                @include fill( $bg: $kendo-grid-sticky-selected-bg );
+            }
         }
 
         &.k-selected.k-table-alt-row td.k-grid-content-sticky,
         &.k-selected.k-table-alt-row .k-table-td.k-grid-row-sticky,
         &.k-table-alt-row td.k-grid-content-sticky.k-selected,
         &.k-table-alt-row .k-table-td.k-grid-content-sticky.k-selected {
-            @include fill( $bg: $kendo-grid-sticky-selected-alt-bg );
+            @if($kendo-enable-color-system) {
+                @include fill( $bg: $kendo-grid-sticky-alt-bg );
+
+                &::before {
+                    @include fill( $bg: $kendo-grid-sticky-selected-alt-bg );
+                }
+            } @else {
+                @include fill( $bg: $kendo-grid-sticky-selected-alt-bg );
+            }
         }
 
 
@@ -44948,7 +45781,15 @@ $kendo-grid-row-resizer-height: k-map-get( $kendo-spacing, .5 ) !default;
         &.k-hover td.k-grid-content-sticky.k-selected,
         &:hover .k-table-td.k-grid-content-sticky.k-selected,
         &.k-hover .k-table-td.k-grid-content-sticky.k-selected {
-            background-color: $kendo-grid-sticky-selected-hover-bg;
+            @if($kendo-enable-color-system) {
+                background-color: $kendo-grid-sticky-hover-bg;
+
+                &::before {
+                    background-color: $kendo-grid-sticky-selected-hover-bg;
+                }
+            } @else {
+                background-color: $kendo-grid-sticky-selected-hover-bg;
+            }
         }
     }
 
@@ -44994,14 +45835,30 @@ $kendo-grid-row-resizer-height: k-map-get( $kendo-spacing, .5 ) !default;
         .k-selected.k-grid-row-sticky .k-table-td,
         .k-grid-row-sticky .k-table-td.k-selected,
         .k-selected.k-grid-content-sticky {
-            @include fill( $bg: $kendo-grid-sticky-selected-bg );
+            @if($kendo-enable-color-system) {
+                @include fill( $bg: $kendo-grid-sticky-bg );
+
+                &::before {
+                    @include fill( $bg: $kendo-grid-sticky-selected-bg );
+                }
+            } @else {
+                @include fill( $bg: $kendo-grid-sticky-selected-bg );
+            }
         }
 
         .k-table-row.k-selected.k-table-alt-row .k-grid-content-sticky,
         .k-selected.k-table-alt-row.k-grid-row-sticky td,
         .k-selected.k-table-alt-row.k-grid-row-sticky .k-table-td,
         .k-table-alt-row .k-selected.k-grid-content-sticky {
-            @include fill( $bg: $kendo-grid-sticky-selected-alt-bg );
+            @if($kendo-enable-color-system) {
+                @include fill( $bg: $kendo-grid-sticky-alt-bg );
+
+                &::before {
+                    @include fill( $bg: $kendo-grid-sticky-selected-alt-bg );
+                }
+            } @else {
+                @include fill( $bg: $kendo-grid-sticky-selected-alt-bg );
+            }
         }
 
         // Hover state
@@ -45039,7 +45896,15 @@ $kendo-grid-row-resizer-height: k-map-get( $kendo-spacing, .5 ) !default;
         .k-grid-row-sticky.k-hover .k-table-td.k-selected,
         .k-table-row:hover .k-grid-content-sticky.k-selected,
         .k-table-row.k-hover .k-grid-content-sticky.k-selected {
-            background-color: $kendo-grid-sticky-selected-hover-bg;
+            @if($kendo-enable-color-system) {
+                background-color: $kendo-grid-sticky-hover-bg;
+
+                &::before {
+                    background-color: $kendo-grid-sticky-selected-hover-bg;
+                }
+            } @else {
+                background-color: $kendo-grid-sticky-selected-hover-bg;
+            }
         }
     }
 
@@ -45258,7 +46123,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;
@@ -45622,7 +46487,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;
@@ -45631,12 +46496,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;
@@ -45684,7 +46549,7 @@ $kendo-spreadsheet-drawing-handle-bg: $kendo-color-primary !default;
 $kendo-spreadsheet-drawing-handle-border-radius: $kendo-border-radius-lg !default;
 $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;
 
@@ -46905,21 +47770,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-subtle ), 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-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;
 
@@ -46988,7 +47853,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, 1 ) !default;
+$kendo-pivotgrid-row-headers-bg: if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-component-bg, 1 )) !default;
 
 $kendo-pivotgrid-button-bg: null !default;
 $kendo-pivotgrid-button-text: null !default;
@@ -48556,7 +49421,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;
@@ -48613,7 +49478,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;
@@ -48644,6 +49509,7 @@ $kendo-file-manager-preview-icon-border: null !default;
         border-bottom-width: $kendo-file-manager-toolbar-border-width;
         border-color: inherit;
         flex-shrink: 0;
+        z-index: 1;
     }
 
 
@@ -48658,6 +49524,10 @@ $kendo-file-manager-preview-icon-border: null !default;
         overflow: hidden;
     }
 
+    .k-filemanager-splitter {
+        border-width: 0;
+    }
+
 
     // Navigation
     .k-filemanager-navigation {
@@ -49085,7 +49955,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;
@@ -49128,17 +49998,17 @@ $kendo-taskboard-card-border: $kendo-card-border !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-focus-shadow: none !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-hover-border: 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-selected-border: k-color-tint( $kendo-color-primary-lighter, 5 ) !default;
+$kendo-taskboard-card-selected-border: if($kendo-enable-color-system, k-color( primary-emphasis ), k-color-tint( $kendo-color-primary-lighter, 5 )) !default;
 $kendo-taskboard-card-selected-shadow: none !default;
 
 $kendo-taskboard-card-header-text: $kendo-color-primary !default;
-$kendo-taskboard-card-header-focus-text: $kendo-color-primary-darker !default;
-$kendo-taskboard-card-header-hover-text: $kendo-color-primary-darker !default;
+$kendo-taskboard-card-header-hover-text: if($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker) !default;
+$kendo-taskboard-card-header-focus-text: if($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker) !default;
 
 $kendo-taskboard-drag-placeholder-border-width: 1px !default;
 $kendo-taskboard-drag-placeholder-border-radius: $kendo-taskboard-card-border-radius !default;
@@ -49599,7 +50469,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
@@ -50813,12 +51683,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-legacy( $kendo-gantt-bg ), .025 ) !default;
+$kendo-gantt-nonwork-bg: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .03 ), rgba( k-contrast-legacy( $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-legacy( $kendo-gantt-bg ) !default;
+$kendo-gantt-line-fill: if($kendo-enable-color-system, k-color( on-base ), k-contrast-legacy( $kendo-gantt-bg )) !default;
 $kendo-gantt-line-selected-fill: $kendo-color-primary !default;
 
 $kendo-gantt-dot-size: 8px !default;
@@ -50833,19 +51703,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-legacy( $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 ), k-contrast-legacy( $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;
@@ -50879,10 +51749,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;
@@ -51188,9 +52058,9 @@ $kendo-gantt-validation-tooltip-invalid-border: $kendo-color-error !default;
 
 
     // Timeline
-    .k-gantt-timeline {
+    .k-gantt-timeline-pane {
 
-        .k-timeline {
+        .k-gantt-timeline {
             height: 100%;
             border-width: 0;
             display: flex;
@@ -51669,7 +52539,7 @@ $kendo-gantt-validation-tooltip-invalid-border: $kendo-color-error !default;
         }
 
         .k-gantt,
-        .k-gantt-timeline,
+        .k-gantt-timeline-pane,
         .k-gantt-dependencies {
             width: auto !important; // stylelint-disable-line declaration-no-important
             height: auto !important; // stylelint-disable-line declaration-no-important
@@ -51714,7 +52584,7 @@ $kendo-gantt-validation-tooltip-invalid-border: $kendo-color-error !default;
             margin-inline: -26px;
         }
 
-        .k-gantt-timeline {
+        .k-gantt-timeline-pane {
             .k-header {
                 border-width: 0 $kendo-grid-cell-vertical-border-width 1px 0;
             }
@@ -51774,7 +52644,7 @@ $kendo-gantt-validation-tooltip-invalid-border: $kendo-color-error !default;
             margin-right: $kendo-gantt-rtl-milestone-planned-moment-margin-x;
         }
 
-        .k-gantt-timeline .k-milestone-wrap .k-task-start {
+        .k-gantt-timeline-pane .k-milestone-wrap .k-task-start {
             right: $kendo-gantt-rtl-milestone-dot-start-margin-x;
         }
 
@@ -52175,7 +53045,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;
@@ -52187,7 +53057,7 @@ $kendo-scheduler-event-hover-border: null !default;
 $kendo-scheduler-event-hover-gradient: null !default;
 $kendo-scheduler-event-hover-shadow: null !default;
 
-$kendo-scheduler-event-selected-bg: $kendo-selected-bg !default;
+$kendo-scheduler-event-selected-bg: if($kendo-enable-color-system, k-color( primary-active ), $kendo-selected-bg) !default;
 $kendo-scheduler-event-selected-text: $kendo-selected-text !default;
 $kendo-scheduler-event-selected-border: null !default;
 $kendo-scheduler-event-selected-gradient: null !default;
@@ -52201,13 +53071,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 ), 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 ), 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;
@@ -53357,7 +54227,7 @@ $kendo-scheduler-tooltip-callout-text: $kendo-scheduler-tooltip-bg !default;
 
     .k-scheduler-layout td.k-selected,
     .k-scheduler-layout .k-scheduler-cell.k-selected {
-        background-color: rgba($kendo-selected-bg, .25);
+        background-color: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-selected-bg, .25));
     }
 
     .k-scheduler-layout-flex {
@@ -53400,7 +54270,7 @@ $kendo-scheduler-tooltip-callout-text: $kendo-scheduler-tooltip-bg !default;
         }
 
         &.k-event-inverse {
-            color: k-contrast-legacy( $kendo-scheduler-event-text );
+            color: if($kendo-enable-color-system, k-color( on-app-surface ), k-contrast-legacy( $kendo-scheduler-event-text ));
         }
 
         &.k-event-ongoing {
@@ -53474,7 +54344,7 @@ $kendo-scheduler-tooltip-callout-text: $kendo-scheduler-tooltip-bg !default;
 
         // Selected
         .k-scheduler-content tr.k-selected {
-            background-color: rgba($kendo-selected-bg, .25);
+            background-color: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-selected-bg, .25));
         }
         .k-scheduler-content tr.k-selected .k-scheduler-datecolumn,
         .k-scheduler-content tr.k-selected .k-scheduler-groupcolumn {
@@ -53656,7 +54526,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;
@@ -54315,7 +55185,7 @@ $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;
 
 // #endregion
 // #region @import "./_layout.scss"; -> scss/mediaplayer/_layout.scss
@@ -54444,7 +55314,7 @@ $kendo-media-player-titlebar-gradient: rgba( $kendo-media-player-text, .7 ), rgb
     .k-mediaplayer-titlebar {
         color: $kendo-media-player-titlebar-text;
         background-image: linear-gradient( $kendo-media-player-titlebar-gradient );
-        text-shadow: 0 0 2px rgba( $kendo-media-player-text, .5 );
+        text-shadow: 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba( $kendo-media-player-text, .5 ));
     }
 
 }
@@ -54529,9 +55399,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-bg: k-true-mix($kendo-button-bg, $kendo-body-bg, 65%) !default;
-$kendo-timeline-track-arrow-disabled-text: k-true-mix($kendo-button-text, $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-subtle, 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, k-color( border ), 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;
@@ -54555,7 +55425,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;
@@ -56403,51 +57273,51 @@ $_kendo-module-meta: (
 
 /// 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: #ffe162 !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 ), #ffe162) !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: #4cd180 !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 ), #4cd180) !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: #4b5ffa !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 ), #4b5ffa) !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: #ac58ff !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 ), #ac58ff) !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: #ff5892 !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 ), #ff5892) !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
@@ -56498,13 +57368,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: .3 !default;
@@ -56515,20 +57385,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
@@ -56993,14 +57863,14 @@ $kendo-treemap-line-height: $kendo-line-height-md !default;
         series-30: $kendo-series-30,
 
         gauge-pointer: $kendo-color-primary,
-        gauge-track: k-try-shade( $kendo-chart-bg )
+        gauge-track: if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-chart-bg ))
     );
 
     @each $name, $value in $exported {
         $type: k-meta-type-of($value);
 
         .k-var--#{$name} {
-            @if $type == "color" {
+            @if $type == "color" or $type == "string" {
                 // background-color can store any color
                 background-color: $value;
             } @else if $type == "number" {
@@ -57274,7 +58144,7 @@ $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;
 
@@ -57843,7 +58713,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;