@progress/kendo-theme-bootstrap 7.1.0-dev.8 → 7.1.0

package/lib/swatches/bootstrap-3-dark.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap 3 Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "7.1.0-dev.8",
+    "version": "7.1.0",
     "previewColors": [
         "#000000",
         "#222222",

package/lib/swatches/bootstrap-3.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap 3",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "7.1.0-dev.8",
+    "version": "7.1.0",
     "previewColors": [
         "#ffffff",
         "#f5f5f5",

package/lib/swatches/bootstrap-4-dark.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap 4 Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "7.1.0-dev.8",
+    "version": "7.1.0",
     "previewColors": [
         "#000000",
         "#212529",

package/lib/swatches/bootstrap-4.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap 4",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "7.1.0-dev.8",
+    "version": "7.1.0",
     "previewColors": [
         "#ffffff",
         "#f8f9fa",

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

@@ -3,7 +3,7 @@
     "name": "Bootstrap Dataviz v4",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "7.1.0-dev.8",
+    "version": "7.1.0",
     "previewColors": [
         "#0275d8",
         "#5bc0de",

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

@@ -3,7 +3,7 @@
     "name": "Bootstrap Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "7.1.0-dev.8",
+    "version": "7.1.0",
     "previewColors": [
         "#000000",
         "#212529",

package/lib/swatches/bootstrap-main.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "7.1.0-dev.8",
+    "version": "7.1.0",
     "previewColors": [
         "#ffffff",
         "#f8f9fa",

package/lib/swatches/bootstrap-nordic.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Nordic",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "7.1.0-dev.8",
+    "version": "7.1.0",
     "previewColors": [
         "#ffffff",
         "#f8f9fa",

package/lib/swatches/bootstrap-turquoise-dark.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Turquoise Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "7.1.0-dev.8",
+    "version": "7.1.0",
     "previewColors": [
         "#000000",
         "#292b2c",

package/lib/swatches/bootstrap-turquoise.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Turquoise",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "7.1.0-dev.8",
+    "version": "7.1.0",
     "previewColors": [
         "#ffffff",
         "#f2f2f2",

package/lib/swatches/bootstrap-urban.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Urban",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "7.1.0-dev.8",
+    "version": "7.1.0",
     "previewColors": [
         "#ffffff",
         "#e3eef4",

package/lib/swatches/bootstrap-vintage.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Vintage",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "7.1.0-dev.8",
+    "version": "7.1.0",
     "previewColors": [
         "#ffffff",
         "#f2efe8",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-bootstrap",
   "description": "Bootstrap theme for Kendo UI",
-  "version": "7.1.0-dev.8",
+  "version": "7.1.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -53,14 +53,14 @@
   },
   "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",
+    "@progress/kendo-theme-default": "7.1.0",
+    "@progress/kendo-theme-utils": "7.1.0",
     "bootstrap": "5.2.1"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "f3ba688605a78aae03fb9e7a04664489f475ee81"
+  "gitHead": "72d42dfbf1b9b895c405ccba9b35d22204a4b12d"
 }

package/scss/_bootstrap-overrides.scss

@@ -1,22 +0,0 @@
-$kendo-is-dark-theme: false !default;
-
-$gray-100: #f8f9fa !default;
-$gray-200: #e9ecef !default;
-$gray-300: #dee2e6 !default;
-$gray-400: #ced4da !default;
-$gray-500: #adb5bd !default;
-$gray-600: #6c757d !default;
-$gray-700: #495057 !default;
-$gray-800: #343a40 !default;
-$gray-900: #212529 !default;
-
-$kendo-body-bg: #ffffff !default;
-
-$kendo-component-bg: $kendo-body-bg !default;
-$kendo-component-text: k-contrast-color( $kendo-component-bg, $gray-900, $gray-100 ) !default;
-$kendo-component-border: if( k-is-light( $kendo-component-bg ), $gray-300, $gray-700 ) !default;
-
-$input-bg: $kendo-component-bg !default;
-$input-color: k-contrast-color( $input-bg, $gray-900, $gray-300 ) !default;
-$input-border-color: if( k-is-light( $input-bg ), $gray-400, $gray-600 ) !default;
-$input-placeholder-color: k-contrast-color( $input-bg, $gray-600, $gray-400 ) !default;

package/scss/_variables.scss

@@ -1,19 +1,4 @@
 @import "./core/functions/index.import.scss";
-@import "./_bootstrap-overrides.scss";
-@import "bootstrap/scss/_functions.scss";
-@import "bootstrap/scss/_variables.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;
@@ -114,107 +99,6 @@ $kendo-zindex-window: 2 !default;
 $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: $primary !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-color( $kendo-color-primary ) !default;
-
-/// The secondary color of the theme.
-/// @group color-system
-/// @type Color
-$kendo-color-secondary: $secondary !default;
-$kendo-color-secondary-lighter: k-color-tint( $kendo-color-secondary, 2 ) !default;
-$kendo-color-secondary-darker: k-color-shade( $kendo-color-secondary, 2 ) !default;
-
-/// The color used along with the secondary color denoted by $kendo-color-secondary.
-/// Used to provide contrast between the background and foreground colors.
-/// @group color-system
-/// @type Color
-$kendo-color-secondary-contrast: k-contrast-color( $kendo-color-secondary ) !default;
-
-/// The tertiary color of the theme.
-/// @group color-system
-/// @type Color
-$kendo-color-tertiary: $purple !default;
-$kendo-color-tertiary-lighter: k-color-tint( $kendo-color-tertiary, 2 ) !default;
-$kendo-color-tertiary-darker: k-color-shade( $kendo-color-tertiary, 2 ) !default;
-
-/// The color used along with the tertiary color denoted by $kendo-color-tertiary.
-/// Used to provide contrast between the background and foreground colors.
-/// @group color-system
-/// @type Color
-$kendo-color-tertiary-contrast: k-contrast-color( $kendo-color-tertiary ) !default;
-
-/// The color for informational messages and states.
-/// @group color-system
-/// @type Color
-$kendo-color-info: $info !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: $success !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: $warning !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: $danger !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: $dark !default;
-
-/// The light color of the theme.
-/// @group color-system
-/// @type Color
-$kendo-color-light: $light !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.
@@ -266,73 +150,6 @@ $kendo-font-weight-bold: $font-weight-bold !default;
 $kendo-letter-spacing: null !default;
 
 
-// Generic styles
-
-// Root styles
-$kendo-body-bg: $kendo-color-white !default;
-$kendo-body-text: k-contrast-color( $kendo-body-bg, $gray-900, $gray-100 ) !default;
-
-$kendo-subtle-text: if( $kendo-is-dark-theme, $gray-400, $text-muted ) !default;
-
-$kendo-app-bg: k-try-shade( $kendo-body-bg, .25 ) !default;
-$kendo-app-text: $kendo-body-text !default;
-$kendo-app-border: if( k-is-light( $kendo-app-bg ), $gray-300, $gray-700 ) !default;
-
-// Link
-$kendo-link-text: $link-color !default;
-$kendo-link-hover-text: $link-hover-color !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: $kendo-body-bg !default;
-/// Text color of a component.
-/// Note: do not use this variable directly. Instead derive it as `$component-name-text` e.g. `$kendo-grid-text: $kendo-component-text !default;`.
-/// @group component
-$kendo-component-text: $kendo-body-text !default;
-/// Border color of a component.
-/// Note: do not use this variable directly. Instead derive it as `$component-name-border` e.g. `$kendo-grid-border: $kendo-component-border !default;`.
-/// @group component
-$kendo-component-border: if( k-is-light( $kendo-component-bg ), $gray-300, $gray-700 ) !default;
-
-
-/// The background of the components' chrome area.
-$kendo-base-bg: $gray-100 !default;
-/// The text color of the components' chrome area.
-$kendo-base-text: $kendo-body-text !default;
-/// The border color of the components' chrome area.
-$kendo-base-border: k-try-shade( $kendo-base-bg, 1 ) !default;
-/// The gradient background of the components' chrome area.
-$kendo-base-gradient: null !default;
-
-/// The background of hovered items.
-$kendo-hover-bg: $gray-200 !default;
-/// The text color of hovered items.
-$kendo-hover-text: $kendo-base-text !default;
-/// The border color of hovered items.
-$kendo-hover-border: k-try-shade( $kendo-hover-bg, 1 ) !default;
-/// The gradient background of hovered items.
-$kendo-hover-gradient: null !default;
-
-/// The background of selected items.
-$kendo-selected-bg: $kendo-color-primary !default;
-/// The text color of selected items.
-$kendo-selected-text: k-contrast-color( $kendo-selected-bg ) !default;
-/// The border color of selected items.
-$kendo-selected-border: k-try-shade( $kendo-selected-bg, 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: $kendo-base-border !default;
-$kendo-selected-hover-gradient: null !default;
-
-
 // TODO: refactor
 $kendo-focus-shadow: null !default;
 
@@ -340,7 +157,6 @@ $kendo-transition: color .2s ease-in-out, background-color .2s ease-in-out, bord
 
 
 // Disabled mixin variables
-$kendo-disabled-text: if( $kendo-is-dark-theme, $gray-600, $gray-500) !default;
 $kendo-disabled-filter: grayscale(.1) !default;
 $kendo-disabled-opacity: .65 !default;
 
@@ -354,25 +170,6 @@ $kendo-disabled-styling: (
 
 // TODO: refactor once we extract drag drop as separate module
 
-
-// Header
-$kendo-component-header-bg: $kendo-base-bg !default;
-$kendo-component-header-text: $kendo-component-text !default;
-$kendo-component-header-border: $kendo-component-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: 0 0 0 .25rem rgba( $kendo-invalid-border, .25 ) !default;
-
-$kendo-valid-bg: null !default;
-$kendo-valid-text: $kendo-color-success !default;
-$kendo-valid-border: $kendo-color-success !default;
-$kendo-valid-shadow: 0 0 0 .25rem rgba( $kendo-valid-border, .25 ) !default;
-
 // Loading
 $kendo-loading-opacity: .3 !default;
 $kendo-zindex-loading: 100 !default;

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/all.scss

@@ -1,6 +1,5 @@
 @import "./index.scss";
 
-
 @if not $kendo-auto-bootstrap {
     @include kendo-theme--config();
     @include kendo-theme--styles();

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;
 /// The text color of the AppBar based on light theme color.
 /// @group appbar
-$kendo-appbar-light-text: k-contrast-color( $kendo-color-light ) !default;
+$kendo-appbar-light-text: if($kendo-enable-color-system, k-color( on-light ), k-contrast-color( $kendo-color-light )) !default;
 
 /// The background color of the AppBar based on dark theme color.
 /// @group appbar
 $kendo-appbar-dark-bg: $kendo-color-dark !default;
 /// The text color of the AppBar based on dark theme 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/breadcrumb/_variables.scss

@@ -156,7 +156,7 @@ $kendo-breadcrumb-link-focus-text: null !default;
 $kendo-breadcrumb-link-focus-border: null !default;
 /// The box shadow of the focused Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-link-focus-shadow: inset 0 0 0 3px rgba( $kendo-breadcrumb-text, .25 ) !default;
+$kendo-breadcrumb-link-focus-shadow: inset 0 0 0 3px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .25 ), rgba( $kendo-breadcrumb-text, .25 )) !default;
 
 /// The background color of the Breadcrumb root link.
 /// @group breadcrumb

package/scss/button/_variables.scss

@@ -105,15 +105,15 @@ $kendo-button-sizes: (
 /// @group button
 $kendo-button-theme-colors: k-map-merge(
     $kendo-theme-colors,
-    ( "base": #e4e7eb )
+    ( "base": if($kendo-enable-color-system, k-color( base ), #e4e7eb) )
 ) !default;
 
 /// The base background of the Button.
 /// @group button
-$kendo-button-bg: #e4e7eb !default;
+$kendo-button-bg: if($kendo-enable-color-system, k-color( base ), #e4e7eb) !default;
 /// The base text color of the Button.
 /// @group button
-$kendo-button-text: k-contrast-color( $kendo-button-bg, $gray-900 ) !default;
+$kendo-button-text: if($kendo-enable-color-system, k-color( on-base ), k-contrast-color( $kendo-button-bg, $gray-900 )) !default;
 /// The base border color of the Button.
 /// @group button
 $kendo-button-border: $kendo-button-bg !default;
@@ -126,13 +126,13 @@ $kendo-button-shadow: null !default;
 
 /// The base background of the hovered Button.
 /// @group button
-$kendo-button-hover-bg: k-color-darken( $kendo-button-bg, 7.5% ) !default;
+$kendo-button-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-color-darken( $kendo-button-bg, 7.5% )) !default;
 /// The base text color of the hovered Button.
 /// @group button
 $kendo-button-hover-text: null !default;
 /// The base border color of the hovered Button.
 /// @group button
-$kendo-button-hover-border: k-color-darken( $kendo-button-bg, 10% ) !default;
+$kendo-button-hover-border: if($kendo-enable-color-system, k-color( base-hover ), k-color-darken( $kendo-button-bg, 10% )) !default;
 /// The base background gradient of the hovered Button.
 /// @group button
 $kendo-button-hover-gradient: null !default;
@@ -142,13 +142,13 @@ $kendo-button-hover-shadow: null !default;
 
 /// The base background color of the active Button.
 /// @group button
-$kendo-button-active-bg: k-color-darken( $kendo-button-bg, 10% ) !default;
+$kendo-button-active-bg: if($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-button-bg, 10% )) !default;
 /// The base text color of the active Button.
 /// @group button
 $kendo-button-active-text: null !default;
 /// The base border color of the active Button.
 /// @group button
-$kendo-button-active-border: k-color-darken( $kendo-button-bg, 12.5% ) !default;
+$kendo-button-active-border: if($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-button-bg, 12.5% )) !default;
 /// The base background gradient of the active Button.
 /// @group button
 $kendo-button-active-gradient: null !default;
@@ -158,13 +158,13 @@ $kendo-button-active-shadow: null !default;
 
 /// The base background color of the selected Button.
 /// @group button
-$kendo-button-selected-bg: k-color-darken( $kendo-color-primary, 10% ) !default;
+$kendo-button-selected-bg: if($kendo-enable-color-system, k-color( primary-active ), k-color-darken( $kendo-color-primary, 10% )) !default;
 /// The text color of the selected Button.
 /// @group button
-$kendo-button-selected-text: k-contrast-color( $kendo-button-selected-bg ) !default;
+$kendo-button-selected-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-button-selected-bg )) !default;
 /// The border color of the selected Button.
 /// @group button
-$kendo-button-selected-border: k-color-darken( $kendo-color-primary, 12.5% ) !default;
+$kendo-button-selected-border: if($kendo-enable-color-system, k-color( primary-active ), k-color-darken( $kendo-color-primary, 12.5% )) !default;
 /// The background gradient of the selected Button.
 /// @group button
 $kendo-button-selected-gradient: $kendo-button-active-gradient !default;
@@ -174,19 +174,19 @@ $kendo-button-selected-shadow: $kendo-button-active-shadow !default;
 
 /// The base background of the focused Button.
 /// @group button
-$kendo-button-focus-bg: k-color-darken( $kendo-button-bg, 10% ) !default;
+$kendo-button-focus-bg: if($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-button-bg, 10% )) !default;
 /// The base text color of the focused Button.
 /// @group button
 $kendo-button-focus-text: null !default;
 /// The base border color of the focused Button.
 /// @group button
-$kendo-button-focus-border: k-color-darken( $kendo-button-bg, 12.5% ) !default;
+$kendo-button-focus-border: if($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-button-bg, 12.5% )) !default;
 /// The base background gradient of the focused Button.
 /// @group button
 $kendo-button-focus-gradient: null !default;
 /// The base shadow of the focused Button.
 /// @group button
-$kendo-button-focus-shadow: 0 0 0 .25rem rgba( $kendo-button-border, .5 ) !default;
+$kendo-button-focus-shadow: 0 0 0 .25rem if($kendo-enable-color-system, rgba( k-color( border, true ), .5), rgba( $kendo-button-border, .5 )) !default;
 
 /// The base background of the disabled Button.
 /// @group button

package/scss/calendar/_variables.scss

@@ -85,7 +85,7 @@ $kendo-calendar-cell-selected-hover-border: $kendo-selected-hover-border !defaul
 $kendo-calendar-cell-selected-hover-gradient: null !default;
 
 $kendo-calendar-cell-focus-shadow: inset $kendo-button-focus-shadow !default;
-$kendo-calendar-cell-selected-focus-shadow: inset 0 0 0 2px rgba( k-color-darken( $kendo-color-primary, 12.5% ), .5 ) !default;
+$kendo-calendar-cell-selected-focus-shadow: inset 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( primary-active, true ), .5 ), rgba( k-color-darken( $kendo-color-primary, 12.5% ), .5 )) !default;
 
 
 // Calendar navigation

package/scss/chat/_variables.scss

@@ -57,7 +57,7 @@ $kendo-chat-bubble-hover-shadow: none !default;
 $kendo-chat-bubble-selected-shadow: none !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: none !default;
 $kendo-chat-alt-bubble-hover-shadow: none !default;

package/scss/checkbox/_variables.scss

@@ -64,7 +64,7 @@ $kendo-checkbox-bg: $kendo-component-bg !default;
 $kendo-checkbox-text: null !default;
 /// The border color of CheckBox.
 /// @group checkbox
-$kendo-checkbox-border: if( k-is-light( $kendo-checkbox-bg ), $gray-400, $gray-600 ) !default;
+$kendo-checkbox-border: if($kendo-enable-color-system, k-color( border-alt ), if( k-is-light( $kendo-checkbox-bg ), $gray-400, $gray-600 )) !default;
 
 /// The background color of the hovered CheckBox.
 /// @group checkbox
@@ -81,7 +81,7 @@ $kendo-checkbox-hover-border: null !default;
 $kendo-checkbox-checked-bg: $kendo-color-primary !default;
 /// The color of the checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-checked-text: k-contrast-color( $kendo-checkbox-checked-bg ) !default;
+$kendo-checkbox-checked-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-checkbox-checked-bg )) !default;
 /// The border color of the checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-checked-border: $kendo-checkbox-checked-bg !default;
@@ -98,10 +98,10 @@ $kendo-checkbox-indeterminate-border: $kendo-checkbox-checked-border !default;
 
 /// The border color of the focused CheckBox.
 /// @group checkbox
-$kendo-checkbox-focus-border: k-try-tint( $kendo-color-primary, 50% ) !default;
+$kendo-checkbox-focus-border: if($kendo-enable-color-system, k-color( primary-emphasis ), k-try-tint( $kendo-color-primary, 50% )) !default;
 /// The box shadow of the focused CheckBox.
 /// @group checkbox
-$kendo-checkbox-focus-shadow: 0 0 0 .25rem rgba( $kendo-color-primary, .25 ) !default;
+$kendo-checkbox-focus-shadow: 0 0 0 .25rem if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 )) !default;
 /// The border color of the focused and checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-focus-checked-border: $kendo-checkbox-checked-border !default;

package/scss/chip/_theme.scss

@@ -9,16 +9,17 @@
 
             @if ($name == "info") {
                 @include fill (
-                    $color: if( $kendo-is-dark-theme, k-color-tint($color, 25%), $kendo-chip-outline-text),
-                    $border: if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color)
+                    $color: if($kendo-enable-color-system, $kendo-chip-outline-text, if( $kendo-is-dark-theme, k-color-tint($color, 25%), $kendo-chip-outline-text)),
+                    $border: if($kendo-enable-color-system, $color, if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color))
                 );
 
                 &:hover,
                 &.k-hover,
                 &.k-selected {
                     @include fill(
-                        $color: if( $kendo-is-dark-theme, k-contrast-color($color), $kendo-chip-outline-text),
-                        $bg: $color
+                        if($kendo-enable-color-system, $kendo-chip-outline-text, if( $kendo-is-dark-theme, k-contrast-color($color), $kendo-chip-outline-text)),
+                        $color,
+                        $color
                     );
                 }
 

package/scss/chip/_variables.scss

@@ -159,7 +159,7 @@ $kendo-chip-outline-shadow: 0 0 0 2px rgba( $kendo-chip-base-bg, .16 ) !default;
 $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-color( $kendo-chip-outline-hover-bg ) !default;
+$kendo-chip-outline-hover-text: if($kendo-enable-color-system, k-color( base-subtle ), k-contrast-color( $kendo-chip-outline-hover-bg )) !default;
 
 /// The base background color of the selected outline Chip.
 /// @group chip

package/scss/core/_index.scss

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