@progress/kendo-theme-material 7.1.0-dev.8 → 7.1.0-dev.9

package/lib/swatches/material-aqua-dark.json

@@ -3,7 +3,7 @@
     "name": "Material Aqua Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "7.1.0-dev.8",
+    "version": "7.1.0-dev.9",
     "api": "legacy",
     "previewColors": [
         "#121212",

package/lib/swatches/material-arctic.json

@@ -3,7 +3,7 @@
     "name": "Material Arctic",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "7.1.0-dev.8",
+    "version": "7.1.0-dev.9",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/material-burnt-teal.json

@@ -3,7 +3,7 @@
     "name": "Material Burnt Teal",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "7.1.0-dev.8",
+    "version": "7.1.0-dev.9",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/material-dataviz-v4.json

@@ -3,7 +3,7 @@
     "name": "Material Dataviz v4",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "7.1.0-dev.8",
+    "version": "7.1.0-dev.9",
     "api": "legacy",
     "previewColors": [
         "#3f51b5",

package/lib/swatches/material-eggplant.json

@@ -3,7 +3,7 @@
     "name": "Material Eggplant",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "7.1.0-dev.8",
+    "version": "7.1.0-dev.9",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/material-lime-dark.json

@@ -3,7 +3,7 @@
     "name": "Material Lime Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "7.1.0-dev.8",
+    "version": "7.1.0-dev.9",
     "api": "legacy",
     "previewColors": [
         "#121212",

package/lib/swatches/material-lime.json

@@ -3,7 +3,7 @@
     "name": "Material Lime",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "7.1.0-dev.8",
+    "version": "7.1.0-dev.9",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/material-main-dark.json

@@ -3,7 +3,7 @@
     "name": "Material Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "7.1.0-dev.8",
+    "version": "7.1.0-dev.9",
     "api": "legacy",
     "previewColors": [
         "#121212",

package/lib/swatches/material-main.json

@@ -3,7 +3,7 @@
     "name": "Material Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "7.1.0-dev.8",
+    "version": "7.1.0-dev.9",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/material-nova.json

@@ -3,7 +3,7 @@
     "name": "Material Nova",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "7.1.0-dev.8",
+    "version": "7.1.0-dev.9",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/material-pacific-dark.json

@@ -3,7 +3,7 @@
     "name": "Material Pacific Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "7.1.0-dev.8",
+    "version": "7.1.0-dev.9",
     "api": "legacy",
     "previewColors": [
         "#121212",

package/lib/swatches/material-pacific.json

@@ -3,7 +3,7 @@
     "name": "Material Pacific Light",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "7.1.0-dev.8",
+    "version": "7.1.0-dev.9",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/material-sky-dark.json

@@ -3,7 +3,7 @@
     "name": "Material Sky Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "7.1.0-dev.8",
+    "version": "7.1.0-dev.9",
     "api": "legacy",
     "previewColors": [
         "#121212",

package/lib/swatches/material-sky.json

@@ -3,7 +3,7 @@
     "name": "Material Sky",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "7.1.0-dev.8",
+    "version": "7.1.0-dev.9",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/material-smoke.json

@@ -3,7 +3,7 @@
     "name": "Material Smoke",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "7.1.0-dev.8",
+    "version": "7.1.0-dev.9",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-material",
   "description": "Material theme for Kendo UI",
-  "version": "7.1.0-dev.8",
+  "version": "7.1.0-dev.9",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -54,13 +54,13 @@
   },
   "dependencies": {
     "@progress/kendo-svg-icons": "2.1.0",
-    "@progress/kendo-theme-core": "7.1.0-dev.8",
-    "@progress/kendo-theme-default": "7.1.0-dev.8",
-    "@progress/kendo-theme-utils": "7.1.0-dev.8"
+    "@progress/kendo-theme-core": "7.1.0-dev.9",
+    "@progress/kendo-theme-default": "7.1.0-dev.9",
+    "@progress/kendo-theme-utils": "7.1.0-dev.9"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "f3ba688605a78aae03fb9e7a04664489f475ee81"
+  "gitHead": "4a6a0cb7085a4b032405585e25da25fd4383d7d7"
 }

package/scss/_variables.scss

@@ -1,17 +1,5 @@
 @import "./core/functions/index.import.scss";
 
-/// The color white.
-/// Note: you cannot change this value.
-/// @type Color
-/// @group color-system
-$kendo-color-white: #ffffff; // stylelint-disable-line scss/dollar-variable-default
-
-/// The color black.
-/// Note: you cannot change this value.
-/// @type Color
-/// @group color-system
-$kendo-color-black: #000000; // stylelint-disable-line scss/dollar-variable-default
-
 // Options
 $kendo-enable-rounded: true !default;
 $kendo-enable-shadows: true !default;
@@ -66,30 +54,8 @@ $kendo-spacing: (
 ) !default;
 
 
-// Apply material theme, as early as possible
-$primary-palette-name: indigo !default;
-$secondary-palette-name: pink !default;
-$tertiary-palette-name: teal !default;
-$adjust-contrast: true !default;
-$theme-type: light !default; // light or dark
-
-$primary-palette: material-palette( $primary-palette-name, 500, 300, 700, $adjust-contrast ) !default;
-$secondary-palette: material-palette( $secondary-palette-name, 500, 300, 700, $adjust-contrast ) !default;
-$tertiary-palette: material-palette( $tertiary-palette-name, 500, 300, 700, $adjust-contrast ) !default;
-
-$theme: material-theme(
-    $primary-palette,
-    $secondary-palette,
-    $theme-type
-) !default;
-
-
 // Shadows
 
-/// Color of shadows
-/// @group shadows
-$elevation: k-map-get( $theme, elevation ) !default;
-
 /// Shadow for switch.
 /// Equivalent to material elevation 1.
 /// @group shadows
@@ -182,108 +148,6 @@ $kendo-zindex-window: 2 !default;
 $kendo-zindex-loading: 100 !default;
 
 
-// Color settings
-$kendo-is-dark-theme: k-map-get( $theme, is-dark ) !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: material-color( $primary-palette, main ) !default;
-$kendo-color-primary-lighter: material-color( $primary-palette, lighter ) !default;
-$kendo-color-primary-darker: material-color( $primary-palette, darker ) !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: material-color( $primary-palette, main-contrast ) !default;
-
-/// The secondary color of the theme.
-/// @group color-system
-/// @type Color
-$kendo-color-secondary: material-color( $secondary-palette, main ) !default;
-$kendo-color-secondary-lighter: material-color( $secondary-palette, lighter ) !default;
-$kendo-color-secondary-darker: material-color( $secondary-palette, darker ) !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: material-color( $secondary-palette, main-contrast ) !default;
-
-/// The tertiary color of the theme.
-/// @group color-system
-/// @type Color
-$kendo-color-tertiary: material-color($tertiary-palette, main) !default;
-$kendo-color-tertiary-lighter: material-color($tertiary-palette, lighter) !default;
-$kendo-color-tertiary-darker: material-color($tertiary-palette, darker) !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: material-color($tertiary-palette, main-contrast) !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: get-base-hue( gray, 800 ) !default;
-
-/// The light color of the theme.
-/// @group color-system
-/// @type Color
-$kendo-color-light: get-base-hue( gray, 100 ) !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
 
 /// Base font size across all components.
@@ -338,78 +202,9 @@ $kendo-font-weight-bold: 700 !default;
 // Letter Spacing
 $kendo-letter-spacing: null !default;
 
-
-// Generic styles
-
-// Root styles
-$kendo-body-bg: k-map-get( $theme, body-bg ) !default;
-$kendo-body-text: k-map-get( $theme, body-text ) !default;
-
-$kendo-subtle-text: k-map-get( $theme, subtle-text ) !default;
-
-$kendo-app-bg: $kendo-body-bg !default;
-$kendo-app-text: $kendo-body-text !default;
-$kendo-app-border: k-map-get( $theme, component-border ) !default;
-
-// Link
-$kendo-link-text: $kendo-color-secondary !default;
-$kendo-link-hover-text: $kendo-color-secondary-darker !default;
-
-
-// Components
-
-// Component
-/// Background color of a component.
-/// Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$kendo-grid-bg: $kendo-component-bg !default;`.
-/// @group component
-$kendo-component-bg: k-map-get( $theme, component-bg ) !default;
-/// Text color of a component.
-/// Note: do not use this variable directly. Instead derive it as `$component-name-text` e.g. `$kendo-grid-text: $kendo-component-text !default;`.
-/// @group component
-$kendo-component-text: k-map-get( $theme, component-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: k-map-get( $theme, component-border ) !default;
-
-
-/// The background of the components' chrome area.
-$kendo-base-bg: k-map-get( $theme, base-bg ) !default;
-/// The text color of the components' chrome area.
-$kendo-base-text: k-map-get( $theme, component-text ) !default;
-/// The border of the components' chrome area.
-$kendo-base-border: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 ) !default;
-/// The gradient background of the components' chrome area.
-$kendo-base-gradient: null !default;
-
-/// The background of hovered items.
-$kendo-hover-bg: k-map-get( $theme, hover-bg ) !default;
-/// The text color of hovered items.
-$kendo-hover-text: $kendo-base-text !default;
-/// The border color of hovered items.
-$kendo-hover-border: rgba( $kendo-base-border, .15 ) !default;
-/// The gradient background of hovered items.
-$kendo-hover-gradient: null !default;
-
-/// The background of selected items.
-$kendo-selected-bg: $kendo-color-secondary !default;
-/// The text color of selected items.
-$kendo-selected-text: $kendo-color-secondary-contrast !default;
-/// The border color of selected items.
-$kendo-selected-border: rgba( $kendo-base-border, .1 ) !default;
-/// The gradient background of selected items.
-$kendo-selected-gradient: null !default;
-
-$kendo-selected-hover-bg: k-try-shade( $kendo-selected-bg, .5 ) !default;
-$kendo-selected-hover-text: $kendo-selected-text !default;
-$kendo-selected-hover-border: rgba( $kendo-base-border, .1 ) !default;
-$kendo-selected-hover-gradient: null !default;
-
 $kendo-transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out !default;
 
-
 // Disabled mixin variables
-$kendo-disabled-text: k-map-get( $theme, disabled-text ) !default;
 $kendo-disabled-filter: grayscale(.1) !default;
 $kendo-disabled-opacity: .6 !default;
 
@@ -418,30 +213,6 @@ $kendo-disabled-styling: (
     filter: $kendo-disabled-filter
 ) !default;
 
-
-// Generic styles
-
-// TODO: refactor once we extract drag drop as separate module
-
-
-// Header
-$kendo-component-header-bg: $kendo-base-bg !default;
-$kendo-component-header-text: $kendo-base-text !default;
-$kendo-component-header-border: $kendo-base-border !default;
-$kendo-component-header-gradient: null !default;
-
-
-// Validator
-$kendo-invalid-bg: null !default;
-$kendo-invalid-text: $kendo-color-error !default;
-$kendo-invalid-border: $kendo-color-error !default;
-$kendo-invalid-shadow: null !default;
-
-$kendo-valid-bg: null !default;
-$kendo-valid-text: $kendo-color-success !default;
-$kendo-valid-border: $kendo-color-success !default;
-$kendo-valid-shadow: null !default;
-
 // Loading
 $kendo-loading-opacity: .3 !default;
 $kendo-zindex-loading: 100 !default;

package/scss/action-buttons/_theme.scss

@@ -9,8 +9,8 @@
     .k-actions {
 
         .k-button-solid-base {
-            background-color: k-try-shade( $kendo-button-bg );
-            border-color: k-try-shade( $kendo-button-bg );
+            background-color: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-button-bg ));
+            border-color: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-button-bg ));
         }
 
     }

package/scss/adaptive/_variables.scss

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

package/scss/appbar/_variables.scss

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

package/scss/bottom-navigation/_theme.scss

@@ -1,6 +1,17 @@
 @import "@progress/kendo-theme-default/scss/bottom-navigation/_theme.scss";
 
-
 @mixin kendo-bottom-navigation--theme() {
+
     @include kendo-bottom-navigation--theme-base();
+
+    // Flat
+    @each $name, $color in $kendo-theme-colors {
+        .k-bottom-nav-flat-#{$name} {
+            .k-bottom-nav-item.k-focus,
+            .k-bottom-nav-item:focus {
+                @include fill( $bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, rgba ), .06 ), rgba($kendo-bottom-nav-flat-text, .05)) );
+            }
+        }
+    }
+
 }

package/scss/breadcrumb/_variables.scss

@@ -147,7 +147,7 @@ $kendo-breadcrumb-link-hover-border: null !default;
 
 /// The background color of the focused Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-link-focus-bg: k-map-get( $theme, focus-bg ) !default;
+$kendo-breadcrumb-link-focus-bg: if($kendo-enable-color-system, k-color( base-active ), k-map-get( $theme, focus-bg )) !default;
 /// The text color of the focused Breadcrumb link.
 /// @group breadcrumb
 $kendo-breadcrumb-link-focus-text: null !default;
@@ -180,7 +180,7 @@ $kendo-breadcrumb-root-link-hover-border: null !default;
 
 /// The background color of the focused Breadcrumb root link.
 /// @group breadcrumb
-$kendo-breadcrumb-root-link-focus-bg: k-map-get( $theme, focus-bg ) !default;
+$kendo-breadcrumb-root-link-focus-bg: if($kendo-enable-color-system, k-color( base-active ), k-map-get( $theme, focus-bg )) !default;
 /// The text color of the focused Breadcrumb root link.
 /// @group breadcrumb
 $kendo-breadcrumb-root-link-focus-text: null !default;

package/scss/button/_theme.scss

@@ -9,7 +9,7 @@
     @each $name, $color in $kendo-button-theme-colors {
         .k-button-solid-#{$name} {
             @include box-shadow( $kendo-button-shadow );
-            color: if( $name == "base", $kendo-button-text, k-contrast-color( $color ) );
+            color: if( $name == "base", $kendo-button-text, if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-color( $color )) );
             background-color: if( $name == "base", $kendo-button-bg, $color );
             border-color: if( $name == "base", $kendo-button-bg, $color );
 
@@ -48,7 +48,7 @@
     // Outline button
     @each $name, $color in $kendo-button-theme-colors {
         .k-button-outline-#{$name} {
-            color: if( $name == "base", $kendo-button-text, $color );
+            color: if( $name == "base", $kendo-button-text, if($kendo-enable-color-system, k-color( #{$name}-on-surface ), $color) );
 
             &:hover,
             &.k-hover,
@@ -57,7 +57,7 @@
             &:active,
             &.k-active,
             &.k-selected {
-                color: if( $name == "base", $kendo-button-text, $color );
+                color: if( $name == "base", $kendo-button-text, if($kendo-enable-color-system, k-color( #{$name}-on-surface ), $color) );
             }
 
             // Disabled state

package/scss/button/_variables.scss

@@ -190,13 +190,13 @@ $kendo-button-focus-shadow: null !default;
 
 /// The base background color of the disabled Button.
 /// @group button
-$kendo-button-disabled-bg: k-try-shade( $kendo-body-bg, 12% ) !default;
+$kendo-button-disabled-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, rgba ), .09 ), k-try-shade( $kendo-body-bg, 12% )) !default;
 /// The base text color of the disabled Button.
 /// @group button
-$kendo-button-disabled-text: $kendo-disabled-text !default;
+$kendo-button-disabled-text: if($kendo-enable-color-system, rgba( k-color( on-app-surface, rgba ), .32 ), $kendo-disabled-text) !default;
 /// The base border color of the disabled Button.
 /// @group button
-$kendo-button-disabled-border: $kendo-button-disabled-bg !default;
+$kendo-button-disabled-border: if($kendo-enable-color-system, transparent, $kendo-button-disabled-bg) !default;
 /// The base background gradient of the disabled Button.
 /// @group button
 $kendo-button-disabled-gradient: null !default;

package/scss/calendar/_theme.scss

@@ -18,7 +18,7 @@
         .k-selected.k-focus .k-link {
             @include fill(
                 $kendo-calendar-cell-selected-text,
-                k-try-tint($kendo-calendar-cell-selected-bg),
+                if($kendo-enable-color-system, $kendo-calendar-cell-selected-bg, k-try-tint($kendo-calendar-cell-selected-bg)),
                 $kendo-calendar-cell-selected-border
             );
         }

package/scss/calendar/_variables.scss

@@ -75,11 +75,11 @@ $kendo-calendar-cell-hover-border: $kendo-hover-border !default;
 $kendo-calendar-cell-hover-gradient: null !default;
 
 $kendo-calendar-cell-selected-bg: $kendo-color-primary !default;
-$kendo-calendar-cell-selected-text: k-contrast-color( $kendo-calendar-cell-selected-bg ) !default;
+$kendo-calendar-cell-selected-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-calendar-cell-selected-bg )) !default;
 $kendo-calendar-cell-selected-border: $kendo-calendar-cell-selected-bg !default;
 $kendo-calendar-cell-selected-gradient: null !default;
 
-$kendo-calendar-cell-selected-hover-bg: k-try-shade( $kendo-calendar-cell-selected-bg, .5 ) !default;
+$kendo-calendar-cell-selected-hover-bg: if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-calendar-cell-selected-bg, .5 )) !default;
 $kendo-calendar-cell-selected-hover-text: $kendo-calendar-cell-selected-text !default;
 $kendo-calendar-cell-selected-hover-border: null !default;
 $kendo-calendar-cell-selected-hover-gradient: null !default;
@@ -92,7 +92,7 @@ $kendo-calendar-cell-selected-focus-shadow: $kendo-calendar-cell-focus-shadow !d
 $kendo-calendar-navigation-width: 5em !default;
 $kendo-calendar-navigation-item-height: 2em !default;
 
-$kendo-calendar-navigation-bg: k-true-mix( $kendo-calendar-text, $kendo-calendar-bg, 3) !default;
+$kendo-calendar-navigation-bg: if($kendo-enable-color-system, k-color( surface ), k-true-mix( $kendo-calendar-text, $kendo-calendar-bg, 3)) !default;
 $kendo-calendar-navigation-text: $kendo-calendar-text !default;
 $kendo-calendar-navigation-border: $kendo-calendar-border !default;
 

package/scss/chat/_variables.scss

@@ -35,7 +35,7 @@ $kendo-chat-avatar-spacing: $kendo-chat-item-spacing-x !default;
 $kendo-chat-toolbar-padding-x: $kendo-toolbar-md-padding-x !default;
 $kendo-chat-toolbar-padding-y: $kendo-toolbar-md-padding-y !default;
 $kendo-chat-toolbar-spacing: $kendo-toolbar-md-spacing !default;
-$kendo-chat-toolbar-bg: k-try-shade( $kendo-button-bg, .5 ) !default;
+$kendo-chat-toolbar-bg: if($kendo-enable-color-system, k-color( surface ), k-try-shade( $kendo-button-bg, .5 )) !default;
 $kendo-chat-toolbar-text: $kendo-toolbar-text !default;
 $kendo-chat-toolbar-border: inherit !default;
 
@@ -57,7 +57,7 @@ $kendo-chat-bubble-hover-shadow: $box-shadow-depth-2 !default;
 $kendo-chat-bubble-selected-shadow: $box-shadow-depth-3 !default;
 
 $kendo-chat-alt-bubble-bg: $kendo-color-primary !default;
-$kendo-chat-alt-bubble-text: k-contrast-color( $kendo-chat-alt-bubble-bg ) !default;
+$kendo-chat-alt-bubble-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-chat-alt-bubble-bg )) !default;
 $kendo-chat-alt-bubble-border: $kendo-chat-alt-bubble-bg !default;
 $kendo-chat-alt-bubble-shadow: $box-shadow-depth-1 !default;
 $kendo-chat-alt-bubble-hover-shadow: $box-shadow-depth-2 !default;

package/scss/checkbox/_theme.scss

@@ -10,7 +10,7 @@
 
         // Disabled state
         .k-checkbox:disabled + & {
-            color: if( $kendo-is-dark-theme, $light-secondary-text, $dark-secondary-text );
+            color: if($kendo-enable-color-system, k-color( subtle ), if( $kendo-is-dark-theme, $light-secondary-text, $dark-secondary-text ));
             opacity: 1;
             filter: none;
         }