@progress/kendo-theme-bootstrap 8.0.0-dev.9 → 8.0.0

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

@@ -3,7 +3,7 @@
     "name": "Bootstrap 3 Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "8.0.0-dev.9",
+    "version": "8.0.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": "8.0.0-dev.9",
+    "version": "8.0.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": "8.0.0-dev.9",
+    "version": "8.0.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": "8.0.0-dev.9",
+    "version": "8.0.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": "8.0.0-dev.9",
+    "version": "8.0.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": "8.0.0-dev.9",
+    "version": "8.0.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": "8.0.0-dev.9",
+    "version": "8.0.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": "8.0.0-dev.9",
+    "version": "8.0.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": "8.0.0-dev.9",
+    "version": "8.0.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": "8.0.0-dev.9",
+    "version": "8.0.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": "8.0.0-dev.9",
+    "version": "8.0.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": "8.0.0-dev.9",
+    "version": "8.0.0",
     "previewColors": [
         "#ffffff",
         "#f2efe8",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-bootstrap",
   "description": "Bootstrap theme for Kendo UI",
-  "version": "8.0.0-dev.9",
+  "version": "8.0.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -52,15 +52,15 @@
     "postpublish": "echo 'no postpublish for bootstrap theme'"
   },
   "dependencies": {
-    "@progress/kendo-svg-icons": "2.3.0",
-    "@progress/kendo-theme-core": "8.0.0-dev.9",
-    "@progress/kendo-theme-default": "8.0.0-dev.9",
-    "@progress/kendo-theme-utils": "8.0.0-dev.9",
+    "@progress/kendo-svg-icons": "3.0.0",
+    "@progress/kendo-theme-core": "8.0.0",
+    "@progress/kendo-theme-default": "8.0.0",
+    "@progress/kendo-theme-utils": "8.0.0",
     "bootstrap": "5.2.1"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "99bbca3665e8949ba5a7725b0d4c3f51a3713835"
+  "gitHead": "5d189bf7291e83332a8817cefbbbecc68fc8a644"
 }

package/scss/calendar/_variables.scss

@@ -3,8 +3,14 @@
 /// The width of the border around the Calendar.
 /// @group calendar
 $kendo-calendar-border-width: 1px !default;
+/// The font family of the Calendar.
+/// @group calendar
 $kendo-calendar-font-family: var( --kendo-font-family, inherit ) !default;
+/// The font size of the Calendar.
+/// @group calendar
 $kendo-calendar-font-size: var( --kendo-font-size, inherit ) !default;
+/// The line height of the Calendar.
+/// @group calendar
 $kendo-calendar-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The size of the cells in the Calendar.
@@ -84,7 +90,11 @@ $kendo-calendar-header-cell-width: $kendo-calendar-cell-size !default;
 /// The height of the header cells in the Calendar.
 /// @group calendar
 $kendo-calendar-header-cell-height: $kendo-calendar-cell-size !default;
+/// The font size of the header cells in the Calendar.
+/// @group calendar
 $kendo-calendar-header-cell-font-size: var( --kendo-font-size-sm, inherit ) !default;
+/// The line height of the header cells in the Calendar.
+/// @group calendar
 $kendo-calendar-header-cell-line-height: 2 !default;
 
 /// The background color of the header cells in the Calendar.

package/scss/chip/_theme.scss

@@ -9,7 +9,7 @@
 
             @if ($name == "info") {
                 @include fill (
-                    $color: if($kendo-enable-color-system, $kendo-chip-outline-text, if( $kendo-is-dark-theme, k-color-tint($color, 25%), $kendo-chip-outline-text)),
+                    $color: if($kendo-enable-color-system, k-color( on-app-surface ), 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))
                 );
 
@@ -17,7 +17,7 @@
                 &.k-hover,
                 &.k-selected {
                     @include fill(
-                        if($kendo-enable-color-system, $kendo-chip-outline-text, if( $kendo-is-dark-theme, k-contrast-color($color), $kendo-chip-outline-text)),
+                        if($kendo-enable-color-system, k-color( on-app-surface ), if( $kendo-is-dark-theme, k-contrast-color($color), $kendo-chip-outline-text)),
                         $color,
                         $color
                     );

package/scss/chip/_variables.scss

@@ -147,7 +147,7 @@ $kendo-chip-solid-selected-text: null !default;
 $kendo-chip-outline-bg: $kendo-component-bg !default;
 /// The base text color of the outline Chip.
 /// @group chip
-$kendo-chip-outline-text: $kendo-chip-solid-text !default;
+$kendo-chip-outline-text: if($kendo-enable-color-system, k-color( base-on-surface ), $kendo-chip-solid-text) !default;
 /// The base border color of the outline Chip.
 /// @group chip
 $kendo-chip-outline-border: $kendo-chip-outline-text !default;

package/scss/core/color-system/_palettes.scss

@@ -6,13 +6,13 @@ $_default-palette-gray: (
     4: #ced4da,
     5: #bdc4cb,
     6: #adb5bd,
-    7: #8d959d,
-    8: #6c757d,
-    9: #606970,
-    10: #555c64,
+    7: #9aa3ac,
+    8: #8b959f,
+    9: #6c757d,
+    10: #596169,
     11: #495057,
     12: #343a40,
-    13: #2c3035,
+    13: #2B2F32,
     14: #212529,
     15: #121417,
     black: #000000,
@@ -25,14 +25,14 @@ $_default-palette-blue: (
     4: #9ec5fe,
     5: #86b6fe,
     6: #6ea8fe,
-    7: #4992fd,
-    8: #207afd,
-    9: #0d6efd,
-    10: #0b5ed7,
-    11: #0a58ca,
-    12: #0a53be,
-    13: #084298,
-    14: #052c65,
+    7: #3d8bfd,
+    8: #0d6efd,
+    9: #0c64e4,
+    10: #0a58ca,
+    11: #094cae,
+    12: #084298,
+    13: #052c65,
+    14: #012151,
     15: #031633,
 );
 
@@ -55,11 +55,11 @@ $_default-palette-yellow: (
 );
 
 $_default-palette-red: (
-    1: #fcebec,
-    2: #fae1e3,
-    3: #f8d7da,
-    4: #f5c2c7,
-    5: #f1aeb5,
+    1: #fceeef,
+    2: #f8d7da,
+    3: #f5c2c7,
+    4: #f1aeb5,
+    5: #ed969f,
     6: #ea868f,
     7: #e35d6a,
     8: #dc3545,
@@ -69,13 +69,13 @@ $_default-palette-red: (
     12: #6e1b23,
     13: #58151c,
     14: #421015,
-    15: #21080a,
+    15: #2c0b0e,
 );
 
 $_default-palette-cyan: (
     1: #e7fafe,
     2: #cff4fc,
-    3: #aaecfa,
+    3: #b7eefa,
     4: #9eeaf9,
     5: #86e5f8,
     6: #6edff6,
@@ -97,14 +97,14 @@ $_default-palette-green: (
     4: #a3cfbb,
     5: #8cc3aa,
     6: #75b798,
-    7: #479f76,
-    8: #198754,
-    9: #146c43,
-    10: #125f3b,
-    11: #0f5132,
-    12: #0d442a,
-    13: #0a3622,
-    14: #08291a,
+    7: #5BAE87,
+    8: #479F76,
+    9: #319064,
+    10: #198754,
+    11: #146C43,
+    12: #0F5132,
+    13: #0D442A,
+    14: #0A3622,
     15: #051b11,
 );
 

package/scss/core/color-system/_swatch.scss

@@ -13,11 +13,11 @@ $_default-colors: (
     // Misc
     app-surface: k-map-get( $kendo-palette-gray, white ),
     on-app-surface: k-map-get( $kendo-palette-gray, 14 ),
-    subtle: k-map-get( $kendo-palette-gray, 9 ),
+    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: k-map-get( $kendo-palette-gray, 3 ),
-    border-alt: k-map-get( $kendo-palette-gray, 4 ),
+    border: rgba( k-map-get( $kendo-palette-gray, 14 ), .13),
+    border-alt: rgba( k-map-get( $kendo-palette-gray, 14 ), .20),
     // Base
     base-subtle: k-map-get( $kendo-palette-gray, 2 ),
     base-subtle-hover: k-map-get( $kendo-palette-gray, 3 ),
@@ -25,7 +25,7 @@ $_default-colors: (
     base: k-map-get( $kendo-palette-gray, 3 ),
     base-hover: k-map-get( $kendo-palette-gray, 4 ),
     base-active: k-map-get( $kendo-palette-gray, 5 ),
-    base-emphasis: k-map-get( $kendo-palette-gray, 6 ),
+    base-emphasis: rgba( k-map-get( $kendo-palette-gray, 14 ), .34),
     base-on-subtle: k-map-get( $kendo-palette-gray, 14 ),
     on-base: k-map-get( $kendo-palette-gray, 14 ),
     base-on-surface: k-map-get( $kendo-palette-gray, 14 ),
@@ -33,24 +33,24 @@ $_default-colors: (
     primary-subtle: k-map-get( $kendo-palette-blue, 2 ),
     primary-subtle-hover: k-map-get( $kendo-palette-blue, 3 ),
     primary-subtle-active: k-map-get( $kendo-palette-blue, 4 ),
-    primary: k-map-get( $kendo-palette-blue, 9 ),
-    primary-hover: k-map-get( $kendo-palette-blue, 10 ),
-    primary-active: k-map-get( $kendo-palette-blue, 11 ),
-    primary-emphasis: k-map-get( $kendo-palette-blue, 6 ),
-    primary-on-subtle: k-map-get( $kendo-palette-blue, 14 ),
+    primary: k-map-get( $kendo-palette-blue, 8 ),
+    primary-hover: k-map-get( $kendo-palette-blue, 9 ),
+    primary-active: k-map-get( $kendo-palette-blue, 10 ),
+    primary-emphasis: rgba( k-map-get( $kendo-palette-blue, 8 ), .40),
+    primary-on-subtle: k-map-get( $kendo-palette-blue, 13 ),
     on-primary: k-map-get( $kendo-palette-gray, white ),
-    primary-on-surface: k-map-get( $kendo-palette-blue, 9 ),
+    primary-on-surface: k-map-get( $kendo-palette-blue, 8 ),
     // Secondary
     secondary-subtle: k-map-get( $kendo-palette-gray, 3 ),
     secondary-subtle-hover: k-map-get( $kendo-palette-gray, 4 ),
     secondary-subtle-active: k-map-get( $kendo-palette-gray, 5 ),
-    secondary: k-map-get( $kendo-palette-gray, 8 ),
-    secondary-hover: k-map-get( $kendo-palette-gray, 9 ),
-    secondary-active: k-map-get( $kendo-palette-gray, 10 ),
-    secondary-emphasis: k-map-get( $kendo-palette-gray, 7 ),
-    secondary-on-subtle: k-map-get( $kendo-palette-gray, 14 ),
+    secondary: k-map-get( $kendo-palette-gray, 9 ),
+    secondary-hover: k-map-get( $kendo-palette-gray, 10 ),
+    secondary-active: k-map-get( $kendo-palette-gray, 11 ),
+    secondary-emphasis: rgba( k-map-get( $kendo-palette-gray, 9 ), .40),
+    secondary-on-subtle: k-map-get( $kendo-palette-gray, 13 ),
     on-secondary: k-map-get( $kendo-palette-gray, white ),
-    secondary-on-surface: k-map-get( $kendo-palette-gray, 14 ),
+    secondary-on-surface: k-map-get( $kendo-palette-gray, 9 ),
     // Tertiary
     tertiary-subtle: k-map-get( $kendo-palette-indigo, 2 ),
     tertiary-subtle-hover: k-map-get( $kendo-palette-indigo, 3 ),
@@ -58,123 +58,123 @@ $_default-colors: (
     tertiary: k-map-get( $kendo-palette-indigo, 8 ),
     tertiary-hover: k-map-get( $kendo-palette-indigo, 9 ),
     tertiary-active: k-map-get( $kendo-palette-indigo, 10 ),
-    tertiary-emphasis: k-map-get( $kendo-palette-indigo, 6 ),
-    tertiary-on-subtle: k-map-get( $kendo-palette-indigo, 14 ),
+    tertiary-emphasis: rgba( k-map-get( $kendo-palette-indigo, 8 ), .40),
+    tertiary-on-subtle: k-map-get( $kendo-palette-indigo, 11 ),
     on-tertiary: k-map-get( $kendo-palette-gray, white ),
     tertiary-on-surface: k-map-get( $kendo-palette-indigo, 8 ),
     // Info
     info-subtle: k-map-get( $kendo-palette-cyan, 2 ),
     info-subtle-hover: k-map-get( $kendo-palette-cyan, 3 ),
-    info-subtle-active: k-map-get( $kendo-palette-cyan, 5 ),
+    info-subtle-active: k-map-get( $kendo-palette-cyan, 4 ),
     info: k-map-get( $kendo-palette-cyan, 8 ),
-    info-hover: k-map-get( $kendo-palette-cyan, 9 ),
-    info-active: k-map-get( $kendo-palette-cyan, 10 ),
-    info-emphasis: k-map-get( $kendo-palette-cyan, 7 ),
-    info-on-subtle: k-map-get( $kendo-palette-cyan, 14 ),
-    on-info: k-map-get( $kendo-palette-gray, white ),
+    info-hover: k-map-get( $kendo-palette-cyan, 7 ),
+    info-active: k-map-get( $kendo-palette-cyan, 6 ),
+    info-emphasis: rgba( k-map-get( $kendo-palette-cyan, 8 ), .40),
+    info-on-subtle: k-map-get( $kendo-palette-cyan, 13 ),
+    on-info: k-map-get( $kendo-palette-gray, black ),
     info-on-surface: k-map-get( $kendo-palette-cyan, 8 ),
     // 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, 5 ),
-    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, 7 ),
+    success-subtle-active: k-map-get( $kendo-palette-green, 4 ),
+    success: k-map-get( $kendo-palette-green, 10 ),
+    success-hover: k-map-get( $kendo-palette-green, 11 ),
+    success-active: k-map-get( $kendo-palette-green, 12 ),
+    success-emphasis: rgba( k-map-get( $kendo-palette-green, 10 ), .40),
     success-on-subtle: k-map-get( $kendo-palette-green, 14 ),
     on-success: k-map-get( $kendo-palette-gray, white ),
-    success-on-surface: k-map-get( $kendo-palette-green, 11 ),
+    success-on-surface: k-map-get( $kendo-palette-green, 10 ),
     // Warning
-    warning-subtle: k-map-get( $kendo-palette-yellow, 3 ),
-    warning-subtle-hover: k-map-get( $kendo-palette-yellow, 4 ),
-    warning-subtle-active: k-map-get( $kendo-palette-yellow, 5 ),
+    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, 8 ),
-    warning-hover: k-map-get( $kendo-palette-yellow, 9 ),
-    warning-active: k-map-get( $kendo-palette-yellow, 10 ),
-    warning-emphasis: k-map-get( $kendo-palette-yellow, 7 ),
-    warning-on-subtle: k-map-get( $kendo-palette-yellow, 14 ),
+    warning-hover: k-map-get( $kendo-palette-yellow, 7 ),
+    warning-active: k-map-get( $kendo-palette-yellow, 6 ),
+    warning-emphasis: rgba( k-map-get( $kendo-palette-yellow, 8 ), .40),
+    warning-on-subtle: k-map-get( $kendo-palette-yellow, 13 ),
     on-warning: k-map-get( $kendo-palette-gray, black ),
     warning-on-surface: k-map-get( $kendo-palette-yellow, 8 ),
     // Error
-    error-subtle: k-map-get( $kendo-palette-red, 3 ),
-    error-subtle-hover: k-map-get( $kendo-palette-red, 4 ),
-    error-subtle-active: k-map-get( $kendo-palette-red, 5 ),
+    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, 4 ),
     error: k-map-get( $kendo-palette-red, 8 ),
     error-hover: k-map-get( $kendo-palette-red, 9 ),
     error-active: k-map-get( $kendo-palette-red, 10 ),
-    error-emphasis: k-map-get( $kendo-palette-red, 7 ),
-    error-on-subtle: k-map-get( $kendo-palette-red, 14 ),
+    error-emphasis: rgba( k-map-get( $kendo-palette-red, 8 ), .40),
+    error-on-subtle: k-map-get( $kendo-palette-red, 13 ),
     on-error: k-map-get( $kendo-palette-gray, white ),
     error-on-surface: k-map-get( $kendo-palette-red, 8 ),
     // 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-subtle: k-map-get( $kendo-palette-gray, white ),
+    light-subtle-hover: k-map-get( $kendo-palette-gray, 1 ),
+    light-subtle-active: k-map-get( $kendo-palette-gray, 2 ),
     light: k-map-get( $kendo-palette-gray, 1 ),
     light-hover: k-map-get( $kendo-palette-gray, 2 ),
     light-active: k-map-get( $kendo-palette-gray, 3 ),
-    light-emphasis: k-map-get( $kendo-palette-gray, 5 ),
-    light-on-subtle: k-map-get( $kendo-palette-gray, 12 ),
+    light-emphasis: rgba( k-map-get( $kendo-palette-gray, 14 ), .10),
+    light-on-subtle: k-map-get( $kendo-palette-gray, 11 ),
     on-light: k-map-get( $kendo-palette-gray, black ),
-    light-on-surface: k-map-get( $kendo-palette-gray, 4 ),
+    light-on-surface: k-map-get( $kendo-palette-gray, 1 ),
     // Dark
-    dark-subtle: k-map-get( $kendo-palette-gray, 8 ),
-    dark-subtle-hover: k-map-get( $kendo-palette-gray, 9 ),
-    dark-subtle-active: k-map-get( $kendo-palette-gray, 10 ),
+    dark-subtle: k-map-get( $kendo-palette-gray, 11 ),
+    dark-subtle-hover: k-map-get( $kendo-palette-gray, 10 ),
+    dark-subtle-active: k-map-get( $kendo-palette-gray, 9 ),
     dark: k-map-get( $kendo-palette-gray, 14 ),
-    dark-hover: k-map-get( $kendo-palette-gray, 13 ),
-    dark-active: k-map-get( $kendo-palette-gray, 12 ),
-    dark-emphasis: k-map-get( $kendo-palette-gray, 12 ),
+    dark-hover: k-map-get( $kendo-palette-gray, 12 ),
+    dark-active: k-map-get( $kendo-palette-gray, 11 ),
+    dark-emphasis: rgba( k-map-get( $kendo-palette-gray, 14 ), .40),
     dark-on-subtle: k-map-get( $kendo-palette-gray, white ),
     on-dark: k-map-get( $kendo-palette-gray, white ),
-    dark-on-surface: k-map-get( $kendo-palette-gray, 15 ),
+    dark-on-surface: k-map-get( $kendo-palette-gray, 14 ),
     // Inverse
-    inverse-subtle: k-map-get( $kendo-palette-gray, 8 ),
-    inverse-subtle-hover: k-map-get( $kendo-palette-gray, 9 ),
-    inverse-subtle-active: k-map-get( $kendo-palette-gray, 10 ),
+    inverse-subtle: k-map-get( $kendo-palette-gray, 11 ),
+    inverse-subtle-hover: k-map-get( $kendo-palette-gray, 10 ),
+    inverse-subtle-active: k-map-get( $kendo-palette-gray, 9 ),
     inverse: k-map-get( $kendo-palette-gray, 14 ),
-    inverse-hover: k-map-get( $kendo-palette-gray, 13 ),
-    inverse-active: k-map-get( $kendo-palette-gray, 12 ),
-    inverse-emphasis: k-map-get( $kendo-palette-gray, 12 ),
+    inverse-hover: k-map-get( $kendo-palette-gray, 12 ),
+    inverse-active: k-map-get( $kendo-palette-gray, 11 ),
+    inverse-emphasis: rgba( k-map-get( $kendo-palette-gray, 14 ), .40),
     inverse-on-subtle: k-map-get( $kendo-palette-gray, white ),
     on-inverse: k-map-get( $kendo-palette-gray, white ),
-    inverse-on-surface: k-map-get( $kendo-palette-gray, 15 ),
+    inverse-on-surface: k-map-get( $kendo-palette-gray, 14 ),
     // Series A
     series-a: k-map-get( $kendo-palette-blue, 9 ),
     series-a-bold: k-map-get( $kendo-palette-blue, 12 ),
-    series-a-bolder: k-map-get( $kendo-palette-blue, 14 ),
-    series-a-subtle: k-map-get( $kendo-palette-blue, 5 ),
-    series-a-subtler: k-map-get( $kendo-palette-blue, 7 ),
+    series-a-bolder: k-map-get( $kendo-palette-blue, 13 ),
+    series-a-subtle: k-map-get( $kendo-palette-blue, 7 ),
+    series-a-subtler: k-map-get( $kendo-palette-blue, 5 ),
     // Series B
     series-b: k-map-get( $kendo-palette-indigo, 8 ),
     series-b-bold: k-map-get( $kendo-palette-indigo, 10 ),
     series-b-bolder: k-map-get( $kendo-palette-indigo, 12 ),
-    series-b-subtle: k-map-get( $kendo-palette-indigo, 5 ),
-    series-b-subtler: k-map-get( $kendo-palette-indigo, 7 ),
+    series-b-subtle: k-map-get( $kendo-palette-indigo, 7 ),
+    series-b-subtler: k-map-get( $kendo-palette-indigo, 5 ),
     // Series C
     series-c: k-map-get( $kendo-palette-teal, 8 ),
-    series-c-bold: k-map-get( $kendo-palette-teal, 10 ),
-    series-c-bolder: k-map-get( $kendo-palette-teal, 12 ),
-    series-c-subtle: k-map-get( $kendo-palette-teal, 5 ),
-    series-c-subtler: k-map-get( $kendo-palette-teal, 7 ),
+    series-c-bold: k-map-get( $kendo-palette-teal, 11 ),
+    series-c-bolder: k-map-get( $kendo-palette-teal, 13 ),
+    series-c-subtle: k-map-get( $kendo-palette-teal, 6 ),
+    series-c-subtler: k-map-get( $kendo-palette-teal, 4 ),
     // Series D
-    series-d: k-map-get( $kendo-palette-green, 8 ),
-    series-d-bold: k-map-get( $kendo-palette-green, 10 ),
-    series-d-bolder: k-map-get( $kendo-palette-green, 12 ),
-    series-d-subtle: k-map-get( $kendo-palette-green, 5 ),
-    series-d-subtler: k-map-get( $kendo-palette-green, 7 ),
+    series-d: k-map-get( $kendo-palette-green, 10 ),
+    series-d-bold: k-map-get( $kendo-palette-green, 12 ),
+    series-d-bolder: k-map-get( $kendo-palette-green, 14 ),
+    series-d-subtle: k-map-get( $kendo-palette-green, 8 ),
+    series-d-subtler: k-map-get( $kendo-palette-green, 5 ),
     // Series Е
     series-e: k-map-get( $kendo-palette-red, 8 ),
     series-e-bold: k-map-get( $kendo-palette-red, 10 ),
     series-e-bolder: k-map-get( $kendo-palette-red, 12 ),
-    series-e-subtle: k-map-get( $kendo-palette-red, 5 ),
-    series-e-subtler: k-map-get( $kendo-palette-red, 7 ),
+    series-e-subtle: k-map-get( $kendo-palette-red, 7 ),
+    series-e-subtler: k-map-get( $kendo-palette-red, 4 ),
     // Series F
     series-f: k-map-get( $kendo-palette-yellow, 8 ),
     series-f-bold: k-map-get( $kendo-palette-yellow, 10 ),
     series-f-bolder: k-map-get( $kendo-palette-yellow, 12 ),
-    series-f-subtle: k-map-get( $kendo-palette-yellow, 5 ),
-    series-f-subtler: k-map-get( $kendo-palette-yellow, 7 ),
+    series-f-subtle: k-map-get( $kendo-palette-yellow, 7 ),
+    series-f-subtler: k-map-get( $kendo-palette-yellow, 5 ),
 ) !default;
 
 /// The global default Colors map.

package/scss/drawer/_variables.scss

@@ -12,13 +12,23 @@ $kendo-drawer-border: $kendo-component-border !default;
 /// The border width of the Drawer.
 /// @group drawer
 $kendo-drawer-border-width: 1px !default;
+
+/// The font family of the Drawer.
+/// @group drawer
 $kendo-drawer-font-family: var( --kendo-font-family, inherit ) !default;
+/// The font size of the Drawer.
+/// @group drawer
 $kendo-drawer-font-size: var( --kendo-font-size, inherit ) !default;
+/// The line height of the Drawer.
+/// @group drawer
 $kendo-drawer-line-height: var( --kendo-line-height, normal ) !default;
-$kendo-drawer-content-padding-x: $kendo-padding-md-x !default;
+
+/// The horizontal padding of the Drawer content.
+/// @group drawer
+$kendo-drawer-content-padding-x: null !default;
 /// The vertical padding of the Drawer content.
 /// @group drawer
-$kendo-drawer-content-padding-y: $kendo-padding-md-y !default;
+$kendo-drawer-content-padding-y: null !default;
 
 /// The width of the Drawer scrollbar.
 /// @group drawer

package/scss/progressbar/_variables.scss

@@ -24,10 +24,10 @@ $kendo-progressbar-line-height: 1 !default;
 
 /// The background color of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-bg: $gray-200 !default;
+$kendo-progressbar-bg: if($kendo-enable-color-system, k-color( base-subtle ), $gray-200) !default;
 /// The text color of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-text: k-contrast-color( $gray-200 ) !default;
+$kendo-progressbar-text: if($kendo-enable-color-system, k-color( base-on-subtle ), k-contrast-color( $gray-200 )) !default;
 /// The border color of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-border: null !default;

package/scss/switch/_variables.scss

@@ -36,7 +36,7 @@ $kendo-switch-off-track-bg: $kendo-component-bg !default;
 $kendo-switch-off-track-text: null !default;
 /// The border color of the track when the Switch is not checked.
 /// @group switch
-$kendo-switch-off-track-border: $gray-500 !default;
+$kendo-switch-off-track-border: if($kendo-enable-color-system, k-color( base-emphasis ), $gray-500) !default;
 /// The background gradient of the track when the Switch is not checked.
 /// @group switch
 $kendo-switch-off-track-gradient: null !default;
@@ -85,7 +85,7 @@ $kendo-switch-off-track-disabled-gradient: null !default;
 
 /// The background of the thumb when the Switch is not checked.
 /// @group switch
-$kendo-switch-off-thumb-bg: $gray-500 !default;
+$kendo-switch-off-thumb-bg: if($kendo-enable-color-system, k-color( base-emphasis ), $gray-500) !default;
 /// The text color of the thumb when the Switch is not checked.
 /// @group switch
 $kendo-switch-off-thumb-text: null !default;

package/scss/tabstrip/_variables.scss

@@ -81,7 +81,7 @@ $kendo-tabstrip-item-hover-bg: null !default;
 $kendo-tabstrip-item-hover-text: $kendo-link-hover-text !default;
 /// The border color of the hovered TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-hover-border: $gray-200 !default;
+$kendo-tabstrip-item-hover-border: if($kendo-enable-color-system, k-color( base-subtle ), $gray-200) !default;
 /// The gradient of the hovered TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-hover-gradient: null !default;

package/scss/tilelayout/_variables.scss

@@ -5,7 +5,7 @@
 $kendo-tile-layout-border-width: 0px !default;
 /// The background color of the TileLayout.
 /// @group tilelayout
-$kendo-tile-layout-bg: $gray-100 !default;
+$kendo-tile-layout-bg: if($kendo-enable-color-system, k-color( surface ), $gray-100) !default;
 
 /// The horizontal padding of the TileLayout.
 /// @group tilelayout

package/scss/timeline/_variables.scss

@@ -67,7 +67,7 @@ $kendo-timeline-track-start-calc: calc(#{$kendo-timeline-track-arrow-width} - 2
 $kendo-timeline-track-end-calc: calc(#{$kendo-timeline-track-arrow-width} - 2 * #{$kendo-timeline-track-border-width}) !default;
 /// The background color of the Timeline track.
 /// @group timeline
-$kendo-timeline-track-bg: $kendo-button-bg !default;
+$kendo-timeline-track-bg: if($kendo-enable-color-system, k-color( base-subtle ), $kendo-button-bg) !default;
 /// The border color of the Timeline track.
 /// @group timeline
 $kendo-timeline-track-border-color: $kendo-timeline-track-bg !default;