@progress/kendo-theme-bootstrap 8.0.0-dev.1 → 8.0.0-dev.10

package/dist/all.scss

@@ -3877,13 +3877,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,
@@ -3896,14 +3896,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,
 );
 
@@ -3926,11 +3926,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,
@@ -3940,13 +3940,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,
@@ -3968,14 +3968,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,
 );
 
@@ -4050,11 +4050,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 ),
@@ -4062,7 +4062,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 ),
@@ -4070,24 +4070,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 ),
@@ -4095,123 +4095,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.
@@ -4433,6 +4433,7 @@ $kendo-font-size-xl: ( $kendo-font-size-md * 1.5 ) !default;
 /// @group typography
 $kendo-line-height: $line-height-base !default;
 /// The extra small line height across all components.
+/// @group typography
 $kendo-line-height-xs: 1 !default;
 /// The small line height across all components.
 /// @group typography
@@ -4551,6 +4552,7 @@ $kendo-line-height: k-math-div( 20, 14 ) !default;
 /// @group typography
 $kendo-line-height-xs: 1 !default;
 /// The small line height across all components.
+/// @group typography
 $kendo-line-height-sm: 1.25 !default;
 /// The medium line height across all components.
 /// @group typography
@@ -4982,17 +4984,39 @@ $kendo-padding-lg-y: k-spacing(3) !default;
 
 // Radii
 // #region @import "./border-radii/index.import.scss"; -> scss/core/border-radii/index.import.scss
+/// The global border radius used across the Components.
+/// @group radii
 $kendo-border-radius: $border-radius !default;
+/// The none border radius used across the Components.
+/// @group radii
+$kendo-border-radius-none: k-map-get($kendo-spacing, 0) !default;
+/// The extra small border radius used across the Components.
+/// @group radii
 $kendo-border-radius-xs: k-map-get($kendo-spacing, 0.5) !default;
+/// The small border radius used across the Components.
+/// @group radii
 $kendo-border-radius-sm: $border-radius-sm !default;
+/// The medium border radius used across the Components.
+/// @group radii
 $kendo-border-radius-md: $kendo-border-radius !default;
+/// The large border radius used across the Components.
+/// @group radii
 $kendo-border-radius-lg: $border-radius-lg !default;
+/// The extra large border radius used across the Components.
+/// @group radii
 $kendo-border-radius-xl: k-map-get($kendo-spacing, 3) !default;
+/// The third largest border radius used across the Components.
+/// @group radii
 $kendo-border-radius-xxl: k-map-get($kendo-spacing, 4) !default;
+/// The second largest border radius used across the Components.
+/// @group radii
 $kendo-border-radius-xxxl: k-map-get($kendo-spacing, 8) !default;
+/// The largest border radius used across the Components.
+/// @group radii
 $kendo-border-radius-full: 50rem !default;
 
-
+/// The global radii Map.
+/// @group radii
 $kendo-border-radii: (
     xs: $kendo-border-radius-xs,
     sm: $kendo-border-radius-sm,
@@ -5005,14 +5029,32 @@ $kendo-border-radii: (
 ) !default;
 
 // #region @import "@progress/kendo-theme-core/scss/border-radii/index.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/border-radii/index.import.scss
+/// The none border radius used across the Components.
+/// @group radii
 $kendo-border-radius-none: k-map-get($kendo-spacing, 0) !default;
+/// The extra small border radius used across the Components.
+/// @group radii
 $kendo-border-radius-xs: k-map-get($kendo-spacing, 1px) !default;
+/// The small border radius used across the Components.
+/// @group radii
 $kendo-border-radius-sm: k-map-get($kendo-spacing, 0.5) !default;
+/// The medium border radius used across the Components.
+/// @group radii
 $kendo-border-radius-md: k-map-get($kendo-spacing, 1) !default;
+/// The large border radius used across the Components.
+/// @group radii
 $kendo-border-radius-lg: k-map-get($kendo-spacing, 1.5) !default;
+/// The extra large border radius used across the Components.
+/// @group radii
 $kendo-border-radius-xl: k-map-get($kendo-spacing, 2) !default;
+/// The third largest border radius used across the Components.
+/// @group radii
 $kendo-border-radius-xxl: k-map-get($kendo-spacing, 3) !default;
+/// The second largest border radius used across the Components.
+/// @group radii
 $kendo-border-radius-xxxl: k-map-get($kendo-spacing, 4) !default;
+/// The largest border radius used across the Components.
+/// @group radii
 $kendo-border-radius-full: 9999px !default;
 
 
@@ -5031,6 +5073,8 @@ $_default-border-radii: (
 
 $kendo-border-radii: $_default-border-radii !default;
 
+/// The global radii Map.
+/// @group radii
 $kendo-border-radii: k-map-merge($_default-border-radii, $kendo-border-radii);
 
 
@@ -9836,13 +9880,14 @@ $_kendo-module-meta: (
 @mixin kendo-utils--spacing--margin() {
 
     // Margin utility classes
-    @include generate-utils( m, margin, $kendo-spacing, $css-var: "spacing" );
-    @include generate-utils( mt, margin-top, $kendo-spacing, $css-var: "spacing" );
-    @include generate-utils( mr, margin-right, $kendo-spacing, $css-var: "spacing" );
-    @include generate-utils( mb, margin-bottom, $kendo-spacing, $css-var: "spacing" );
-    @include generate-utils( ml, margin-left, $kendo-spacing, $css-var: "spacing" );
-    @include generate-utils( mx, margin-inline, $kendo-spacing, $css-var: "spacing" );
-    @include generate-utils( my, margin-block, $kendo-spacing, $css-var: "spacing" );
+    $kendo-utils-margin: k-map-get( $kendo-utils, "margin" ) !default;
+    @include generate-utils( m, margin, $kendo-utils-margin, $css-var: "spacing" );
+    @include generate-utils( mt, margin-top, $kendo-utils-margin, $css-var: "spacing" );
+    @include generate-utils( mr, margin-right, $kendo-utils-margin, $css-var: "spacing" );
+    @include generate-utils( mb, margin-bottom, $kendo-utils-margin, $css-var: "spacing" );
+    @include generate-utils( ml, margin-left, $kendo-utils-margin, $css-var: "spacing" );
+    @include generate-utils( mx, margin-inline, $kendo-utils-margin, $css-var: "spacing" );
+    @include generate-utils( my, margin-block, $kendo-utils-margin, $css-var: "spacing" );
 
 }
 
@@ -9866,18 +9911,6 @@ $_kendo-module-meta: (
 /// @group padding
 /// @contextType css
 
-/// This is equivalent to `padding: -1px;`.
-/// @example padding: -1px;
-/// @name .k-p--1px
-/// @group padding
-/// @contextType css
-
-/// This is equivalent to `padding: -0.25rem;`.
-/// @example padding: -0.25rem;
-/// @name .k-p--1
-/// @group padding
-/// @contextType css
-
 /// This is equivalent to `padding: 0.25rem;`.
 /// @example padding: 0.25rem;
 /// @name .k-p-xs
@@ -9944,18 +9977,6 @@ $_kendo-module-meta: (
 /// @group padding
 /// @contextType css
 
-/// This is equivalent to `padding-top: -1px;`.
-/// @example padding-top: -1px;
-/// @name .k-pt--1px
-/// @group padding
-/// @contextType css
-
-/// This is equivalent to `padding-top: -0.25rem;`.
-/// @example padding-top: -0.25rem;
-/// @name .k-pt--1
-/// @group padding
-/// @contextType css
-
 /// This is equivalent to `padding-top: 0.25rem;`.
 /// @example padding-top: 0.25rem;
 /// @name .k-pt-xs
@@ -10022,18 +10043,6 @@ $_kendo-module-meta: (
 /// @group padding
 /// @contextType css
 
-/// This is equivalent to `padding-right: -1px;`.
-/// @example padding-right: -1px;
-/// @name .k-pr--1px
-/// @group padding
-/// @contextType css
-
-/// This is equivalent to `padding-right: -0.25rem;`.
-/// @example padding-right: -0.25rem;
-/// @name .k-pr--1
-/// @group padding
-/// @contextType css
-
 /// This is equivalent to `padding-right: 0.25rem;`.
 /// @example padding-right: 0.25rem;
 /// @name .k-pr-xs
@@ -10100,18 +10109,6 @@ $_kendo-module-meta: (
 /// @group padding
 /// @contextType css
 
-/// This is equivalent to `padding-bottom: -1px;`.
-/// @example padding-bottom: -1px;
-/// @name .k-pb--1px
-/// @group padding
-/// @contextType css
-
-/// This is equivalent to `padding-bottom: -0.25rem;`.
-/// @example padding-bottom: -0.25rem;
-/// @name .k-pb--1
-/// @group padding
-/// @contextType css
-
 /// This is equivalent to `padding-bottom: 0.25rem;`.
 /// @example padding-bottom: 0.25rem;
 /// @name .k-pb-xs
@@ -10178,18 +10175,6 @@ $_kendo-module-meta: (
 /// @group padding
 /// @contextType css
 
-/// This is equivalent to `padding-left: -1px;`.
-/// @example padding-left: -1px;
-/// @name .k-pl--1px
-/// @group padding
-/// @contextType css
-
-/// This is equivalent to `padding-left: -0.25rem;`.
-/// @example padding-left: -0.25rem;
-/// @name .k-pl--1
-/// @group padding
-/// @contextType css
-
 /// This is equivalent to `padding-left: 0.25rem;`.
 /// @example padding-left: 0.25rem;
 /// @name .k-pl-xs
@@ -10256,18 +10241,6 @@ $_kendo-module-meta: (
 /// @group padding
 /// @contextType css
 
-/// This is equivalent to `padding-inline: -1px;`.
-/// @example padding-inline: -1px;
-/// @name .k-px--1px
-/// @group padding
-/// @contextType css
-
-/// This is equivalent to `padding-inline: -0.25rem;`.
-/// @example padding-inline: -0.25rem;
-/// @name .k-px--1
-/// @group padding
-/// @contextType css
-
 /// This is equivalent to `padding-inline: 0.25rem;`.
 /// @example padding-inline: 0.25rem;
 /// @name .k-px-xs
@@ -10334,18 +10307,6 @@ $_kendo-module-meta: (
 /// @group padding
 /// @contextType css
 
-/// This is equivalent to `padding-block: -1px;`.
-/// @example padding-block: -1px;
-/// @name .k-py--1px
-/// @group padding
-/// @contextType css
-
-/// This is equivalent to `padding-block: -0.25rem;`.
-/// @example padding-block: -0.25rem;
-/// @name .k-py--1
-/// @group padding
-/// @contextType css
-
 /// This is equivalent to `padding-block: 0.25rem;`.
 /// @example padding-block: 0.25rem;
 /// @name .k-py-xs
@@ -10397,13 +10358,14 @@ $_kendo-module-meta: (
 @mixin kendo-utils--spacing--padding() {
 
     // Padding utility classes
-    @include generate-utils( p, padding, $kendo-spacing, $css-var: "spacing" );
-    @include generate-utils( pt, padding-top, $kendo-spacing, $css-var: "spacing" );
-    @include generate-utils( pr, padding-right, $kendo-spacing, $css-var: "spacing" );
-    @include generate-utils( pb, padding-bottom, $kendo-spacing, $css-var: "spacing" );
-    @include generate-utils( pl, padding-left, $kendo-spacing, $css-var: "spacing" );
-    @include generate-utils( px, padding-inline, $kendo-spacing, $css-var: "spacing" );
-    @include generate-utils( py, padding-block, $kendo-spacing, $css-var: "spacing" );
+    $kendo-utils-padding: k-map-get( $kendo-utils, "padding" ) !default;
+    @include generate-utils( p, padding, $kendo-utils-padding, $css-var: "spacing" );
+    @include generate-utils( pt, padding-top, $kendo-utils-padding, $css-var: "spacing" );
+    @include generate-utils( pr, padding-right, $kendo-utils-padding, $css-var: "spacing" );
+    @include generate-utils( pb, padding-bottom, $kendo-utils-padding, $css-var: "spacing" );
+    @include generate-utils( pl, padding-left, $kendo-utils-padding, $css-var: "spacing" );
+    @include generate-utils( px, padding-inline, $kendo-utils-padding, $css-var: "spacing" );
+    @include generate-utils( py, padding-block, $kendo-utils-padding, $css-var: "spacing" );
 
 }
 
@@ -10448,6 +10410,15 @@ $kendo-theme-colors: () !default;
 $kendo-font-sizes: () !default;
 
 $kendo-util-colors-list: (
+    app-surface,
+    on-app-surface,
+    subtle,
+    surface,
+    surface-alt,
+    border,
+    border-alt,
+    base-subtle,
+    base-emphasis,
     primary-subtle,
     primary,
     primary-emphasis,
@@ -12988,9 +12959,9 @@ $kendo-utils: (
 
     // Gap utility classes
     $kendo-utils-gap: k-map-get( $kendo-utils, "gap" ) !default;
-    @include generate-utils( gap, gap, $kendo-utils-gap );
-    @include generate-utils( gap-x, column-gap, $kendo-utils-gap );
-    @include generate-utils( gap-y, row-gap, $kendo-utils-gap );
+    @include generate-utils( gap, gap, $kendo-utils-gap, $css-var: "spacing" );
+    @include generate-utils( gap-x, column-gap, $kendo-utils-gap, $css-var: "spacing" );
+    @include generate-utils( gap-y, row-gap, $kendo-utils-gap, $css-var: "spacing" );
 
 }
 
@@ -14308,7 +14279,7 @@ $kendo-utils: (
 @mixin kendo-utils--typography--font-weight() {
 
     // Font weight utility classes
-    @include generate-utils( font, font-weight, $kendo-font-weights, $css-var: "font" );
+    @include generate-utils( font, font-weight, $kendo-font-weights, $css-var: "font-weight" );
 
 
     // Legacy aliases
@@ -14429,25 +14400,25 @@ $kendo-utils: (
 // #region @import "./_text-decoration.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/typography/_text-decoration.scss
 /// This is equivalent to `text-decoration: underline;`.
 /// @example text-decoration: underline;
-/// @name .k-underline
+/// @name .k-text-underline
 /// @group text-decoration
 /// @contextType css
 
 /// This is equivalent to `text-decoration: overline;`.
 /// @example text-decoration: overline;
-/// @name .k-overline
+/// @name .k-text-overline
 /// @group text-decoration
 /// @contextType css
 
 /// This is equivalent to `text-decoration: line-through;`.
 /// @example text-decoration: line-through;
-/// @name .k-line-through
+/// @name .k-text-line-through
 /// @group text-decoration
 /// @contextType css
 
 /// This is equivalent to `text-decoration: none-decoration;`.
 /// @example text-decoration: none-decoration;
-/// @name .k-none-decoration
+/// @name .k-text-no-underline
 /// @group text-decoration
 /// @contextType css
 
@@ -17208,48 +17179,124 @@ $_kendo-module-meta: (
 
 
 // Headings
+
+/// The font size of the highest level heading.
+/// @group typography
 $kendo-h1-font-size: $h1-font-size !default;
+/// The font size of the second highest level heading.
+/// @group typography
 $kendo-h2-font-size: $h2-font-size !default;
+/// The font size of the third highest level heading.
+/// @group typography
 $kendo-h3-font-size: $h3-font-size !default;
+/// The font size of the fourth highest level heading.
+/// @group typography
 $kendo-h4-font-size: $h4-font-size !default;
+/// The font size of the fifth highest level heading.
+/// @group typography
 $kendo-h5-font-size: $h5-font-size !default;
+/// The font size of the sixth highest level heading.
+/// @group typography
 $kendo-h6-font-size: $h6-font-size !default;
 
+/// The font family of the highest level heading.
+/// @group typography
 $kendo-h1-font-family: $headings-font-family !default;
+/// The font family of the second highest level heading.
+/// @group typography
 $kendo-h2-font-family: $headings-font-family !default;
+/// The font family of the third highest level heading.
+/// @group typography
 $kendo-h3-font-family: $headings-font-family !default;
+/// The font family of the fourth highest level heading.
+/// @group typography
 $kendo-h4-font-family: $headings-font-family !default;
+/// The font family of the fifth highest level heading.
+/// @group typography
 $kendo-h5-font-family: $headings-font-family !default;
+/// The font family of the sixth highest level heading.
+/// @group typography
 $kendo-h6-font-family: $headings-font-family !default;
 
+/// The line height of the highest level heading.
+/// @group typography
 $kendo-h1-line-height: $headings-line-height !default;
+/// The line height of the second highest level heading.
+/// @group typography
 $kendo-h2-line-height: $headings-line-height !default;
+/// The line height of the third highest level heading.
+/// @group typography
 $kendo-h3-line-height: $headings-line-height !default;
+/// The line height of the fourth highest level heading.
+/// @group typography
 $kendo-h4-line-height: $headings-line-height !default;
+/// The line height of the fifth highest level heading.
+/// @group typography
 $kendo-h5-line-height: $headings-line-height !default;
+/// The line height of the sixth highest level heading.
+/// @group typography
 $kendo-h6-line-height: $headings-line-height !default;
 
+/// The font weight of the highest level heading.
+/// @group typography
 $kendo-h1-font-weight: $headings-font-weight !default;
+/// The font weight of the second highest level heading.
+/// @group typography
 $kendo-h2-font-weight: $headings-font-weight !default;
+/// The font weight of the third highest level heading.
+/// @group typography
 $kendo-h3-font-weight: $headings-font-weight !default;
+/// The font weight of the fourth highest level heading.
+/// @group typography
 $kendo-h4-font-weight: $headings-font-weight !default;
+/// The font weight of the fifth highest level heading.
+/// @group typography
 $kendo-h5-font-weight: $headings-font-weight !default;
+/// The font weight of the sixth highest level heading.
+/// @group typography
 $kendo-h6-font-weight: $headings-font-weight !default;
 
+/// The letter spacing of the highest level heading.
+/// @group typography
 $kendo-h1-letter-spacing: null !default;
+/// The letter spacing of the second highest level heading.
+/// @group typography
 $kendo-h2-letter-spacing: null !default;
+/// The letter spacing of the third highest level heading.
+/// @group typography
 $kendo-h3-letter-spacing: null !default;
+/// The letter spacing of the fourth highest level heading.
+/// @group typography
 $kendo-h4-letter-spacing: null !default;
+/// The letter spacing of the fifth highest level heading.
+/// @group typography
 $kendo-h5-letter-spacing: null !default;
+/// The letter spacing of the sixth highest level heading.
+/// @group typography
 $kendo-h6-letter-spacing: null !default;
 
+/// The margin of the highest level heading.
+/// @group typography
 $kendo-h1-margin: 0 0 $headings-margin-bottom !default;
+/// The margin of the second highest level heading.
+/// @group typography
 $kendo-h2-margin: 0 0 $headings-margin-bottom !default;
+/// The margin of the third highest level heading.
+/// @group typography
 $kendo-h3-margin: 0 0 $headings-margin-bottom !default;
+/// The margin of the fourth highest level heading.
+/// @group typography
 $kendo-h4-margin: 0 0 $headings-margin-bottom !default;
+/// The margin of the fifth highest level heading.
+/// @group typography
 $kendo-h5-margin: 0 0 $headings-margin-bottom !default;
+/// The margin of the sixth highest level heading.
+/// @group typography
 $kendo-h6-margin: 0 0 $headings-margin-bottom !default;
+///
 
+/// The headings Map.
+/// @group typography
 $kendo-headings: (
     h1: (
         font-size: $kendo-h1-font-size,
@@ -17304,58 +17351,140 @@ $kendo-headings: (
 
 
 // Paragraph
+
+/// The margin of the paragraph.
+/// @group typography
 $kendo-paragraph-margin: 0 0 $paragraph-margin-bottom !default;
+/// The font size of the paragraph.
+/// @group typography
 $kendo-paragraph-font-size: var( --kendo-font-size, inherit )  !default;
+/// The font family of the paragraph.
+/// @group typography
 $kendo-paragraph-font-family: var( --kendo-font-family, inherit ) !default;
+/// The line height of the paragraph.
+/// @group typography
 $kendo-paragraph-line-height: var( --kendo-line-height, normal ) !default;
+/// The font weight of the paragraph.
+/// @group typography
 $kendo-paragraph-font-weight: var( --kendo-font-weight-normal, normal ) !default;
+/// The letter spacing of the paragraph.
+/// @group typography
 $kendo-paragraph-letter-spacing: null !default;
 
 
 // Code
+
+/// The font size of the code tag.
+/// @group typography
 $kendo-code-font-size: var( --kendo-font-size-sm, inherit )!default;
+/// The font family of the code tag.
+/// @group typography
 $kendo-code-font-family: var( --kendo-font-family-monospace, normal ) !default;
+/// The line height of the code tag.
+/// @group typography
 $kendo-code-line-height: var( --kendo-line-height, normal ) !default;
+/// The font weight of the code tag.
+/// @group typography
 $kendo-code-font-weight: var( --kendo-font-weight-normal, normal ) !default;
+/// The letter spacing of the code tag.
+/// @group typography
 $kendo-code-letter-spacing: null !default;
 
+/// The horizontal padding of the code tag.
+/// @group typography
 $kendo-code-padding-x: k-spacing(1) !default;
+/// The vertical padding of the code tag.
+/// @group typography
 $kendo-code-padding-y: k-spacing(0) !default;
+/// The horizontal padding of the preformatted text.
+/// @group typography
 $kendo-pre-padding-x: k-spacing(6) !default;
+/// The vertical padding of the preformatted text.
+/// @group typography
 $kendo-pre-padding-y: k-spacing(4) !default;
+/// The width of the border of the code tag.
+/// @group typography
 $kendo-code-border-width: 1px !default;
 
+/// The background color of the code tag.
+/// @group typography
 $kendo-code-bg: $kendo-base-bg !default;
+/// The text color of the code tag.
+/// @group typography
 $kendo-code-text: $kendo-component-text !default;
+/// The border color of the code tag.
+/// @group typography
 $kendo-code-border: $kendo-component-border !default;
 
 
 // Display
+
+/// The font size of the largest display text.
+/// @group typography
 $kendo-display1-font-size: k-map-get( $display-font-sizes, 1) !default;
+/// The font size of the second largest display text.
+/// @group typography
 $kendo-display2-font-size: k-map-get( $display-font-sizes, 2) !default;
+/// The font size of the third largest display text.
+/// @group typography
 $kendo-display3-font-size: k-map-get( $display-font-sizes, 3) !default;
+/// The font size of the fourth largest display text.
+/// @group typography
 $kendo-display4-font-size: k-map-get( $display-font-sizes, 4) !default;
 
+/// The font family of the largest display text.
+/// @group typography
 $kendo-display1-font-family: null !default;
+/// The font family of the second largest display text.
+/// @group typography
 $kendo-display2-font-family: null !default;
+/// The font family of the third largest display text.
+/// @group typography
 $kendo-display3-font-family: null !default;
+/// The font family of the fourth largest display text.
+/// @group typography
 $kendo-display4-font-family: null !default;
 
+/// The line height of the largest display text.
+/// @group typography
 $kendo-display1-line-height: $display-line-height !default;
+/// The line height of the second largest display text.
+/// @group typography
 $kendo-display2-line-height: $display-line-height !default;
+/// The line height of the third largest display text.
+/// @group typography
 $kendo-display3-line-height: $display-line-height !default;
+/// The line height of the fourth largest display text.
+/// @group typography
 $kendo-display4-line-height: $display-line-height !default;
 
+/// The font weight of the largest display text.
+/// @group typography
 $kendo-display1-font-weight: $display-font-weight !default;
+/// The font weight of the second largest display text.
+/// @group typography
 $kendo-display2-font-weight: $display-font-weight !default;
+/// The font weight of the third largest display text.
+/// @group typography
 $kendo-display3-font-weight: $display-font-weight !default;
+/// The font weight of the fourth largest display text.
+/// @group typography
 $kendo-display4-font-weight: $display-font-weight !default;
 
+/// The letter spacing of the largest display text.
+/// @group typography
 $kendo-display1-letter-spacing: null !default;
+/// The letter spacing of the second largest display text.
+/// @group typography
 $kendo-display2-letter-spacing: null !default;
+/// The letter spacing of the third largest display text.
+/// @group typography
 $kendo-display3-letter-spacing: null !default;
+/// The letter spacing of the fourth largest display text.
+/// @group typography
 $kendo-display4-letter-spacing: null !default;
 
+/// The displays Map
 $kendo-display: (
     1: (
         font-size: $kendo-display1-font-size,
@@ -21528,7 +21657,7 @@ $kendo-badge-sizes: (
     // Outline badges
     .k-badge-outline {
         border-color: currentColor;
-        background-color: $kendo-component-bg;
+        background-color: transparent;
     }
 
     @each $name, $color in $kendo-theme-colors {
@@ -21908,6 +22037,7 @@ $kendo-chip-sm-font-size: var( --kendo-font-size-sm, inherit ) !default;
 /// @group chip
 $kendo-chip-md-font-size: var( --kendo-font-size, inherit ) !default;
 /// The font size of the large Chip.
+/// @group chip
 $kendo-chip-lg-font-size: var( --kendo-font-size, inherit )  !default;
 
 /// The Chip's line height that is related to the $kendo-font-size.
@@ -22008,7 +22138,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;
@@ -22280,7 +22410,7 @@ $kendo-chip-list-sizes: (
             @if ($name == "base") {
                 @include fill(
                     $kendo-chip-outline-text,
-                    $kendo-chip-outline-bg,
+                    transparent,
                     $kendo-chip-outline-border
                 );
 
@@ -22305,8 +22435,8 @@ $kendo-chip-list-sizes: (
                 }
             } @else if ($name == "warning") {
                 @include fill(
-                    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, k-color( on-app-surface ), if( $kendo-is-dark-theme, k-color-tint($color, 25%), $kendo-chip-outline-text)),
+                    if($kendo-enable-color-system, transparent, 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))
                 );
 
@@ -22332,7 +22462,7 @@ $kendo-chip-list-sizes: (
             } @else {
                 @include fill(
                     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, transparent, 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% ))
                 );
 
@@ -22379,7 +22509,7 @@ $kendo-chip-list-sizes: (
 
             @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))
                 );
 
@@ -22387,7 +22517,7 @@ $kendo-chip-list-sizes: (
                 &.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
                     );
@@ -23136,7 +23266,7 @@ $kendo-loading-opacity: .3 !default;
         display: flex;
         align-items: center;
         justify-content: center;
-        z-index: 2001;
+        z-index: 20001;
 
         .k-loader {
             padding: 0;
@@ -24179,9 +24309,9 @@ $_kendo-module-meta: (
             &.k-hover {
                 @if $name == "base" {
                     @include fill(
-                        if($kendo-enable-color-system, $kendo-base-bg, k-contrast-legacy( $color )),
-                        $color,
-                        $color
+                        if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $color )),
+                        if($kendo-enable-color-system, k-color( on-base ), k-contrast-legacy( $color )),
+                        if($kendo-enable-color-system, k-color( on-base ), k-contrast-legacy( $color ))
                     );
                 } @else {
                     @include fill(
@@ -24209,9 +24339,9 @@ $_kendo-module-meta: (
             &.k-active {
                 @if $name == "base" {
                     @include fill(
-                        if($kendo-enable-color-system, $kendo-base-bg, k-contrast-legacy( $color )),
-                        $color,
-                        $color
+                        if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $color )),
+                        if($kendo-enable-color-system, k-color( on-base ), k-contrast-legacy( $color )),
+                        if($kendo-enable-color-system, k-color( on-base ), k-contrast-legacy( $color ))
                     );
                 } @else {
                     @include fill(
@@ -24226,9 +24356,9 @@ $_kendo-module-meta: (
             &.k-selected {
                 @if $name == "base" {
                     @include fill(
-                        if($kendo-enable-color-system, $kendo-base-bg, k-contrast-legacy( $color )),
-                        $color,
-                        $color
+                        if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $color )),
+                        if($kendo-enable-color-system, k-color( on-base ), k-contrast-legacy( $color )),
+                        if($kendo-enable-color-system, k-color( on-base ), k-contrast-legacy( $color ))
                     );
                 } @else {
                     @include fill(
@@ -24251,7 +24381,11 @@ $_kendo-module-meta: (
     // Flat button
     @each $name, $color in k-map-merge( $kendo-button-theme-colors, ( "base": inherit ) ) {
         .k-button-flat-#{$name} {
-            color: $color;
+            @if $name == "base" {
+                color: inherit;
+            } @else {
+                color: if($kendo-enable-color-system, k-color( #{$name}-on-surface ), $color);
+            }
 
             // Disabled state
             &:disabled,
@@ -24320,7 +24454,7 @@ $_kendo-module-meta: (
     // Clear button
     @each $name, $color in k-map-merge( $kendo-button-theme-colors, ( "base": $kendo-base-text ) ) {
         .k-button-clear-#{$name} {
-            color: $color;
+            color: if($kendo-enable-color-system, k-color( #{$name}-on-surface ), $color);
 
             &:focus,
             &.k-focus,
@@ -26298,7 +26432,7 @@ $kendo-tooltip-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The font size of the Tooltip title.
 /// @group tooltip
-$kendo-tooltip-title-font-size: calc( #{$kendo-tooltip-font-size} * 1.25 ) !default;
+$kendo-tooltip-title-font-size: calc( var( --kendo-font-size-sm, #{$kendo-font-size-sm} ) * 1.25 ) !default;
 /// The line height of the Tooltip title.
 /// @group tooltip
 $kendo-tooltip-title-line-height: 1 !default;
@@ -27028,7 +27162,7 @@ $kendo-form-sizes: (
     .k-form,
     .k-form-inline {
         legend {
-            font-size: calc( var( --kendo-font-size, inherit ) * 1.5 );
+            font-size: calc( var( --kendo-font-size, .875rem ) * 1.5 );
             font-weight: normal;
             line-height: var( --kendo-line-height, normal );
             text-transform: none;
@@ -29673,10 +29807,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;
@@ -30797,7 +30931,7 @@ $kendo-slider-draghandle-transition-function: cubic-bezier(.25, .8, .25, 1) !def
 
 /// The background color of the Slider track.
 /// @group slider
-$kendo-slider-track-bg: $gray-200 !default;
+$kendo-slider-track-bg: if($kendo-enable-color-system, k-color( base-emphasis ), $gray-200) !default;
 /// The background color of the Slider's track selection.
 /// @group slider
 $kendo-slider-selection-bg: $kendo-selected-bg !default;
@@ -31376,8 +31510,14 @@ $_kendo-module-meta: (
 /// 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.
@@ -31457,7 +31597,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.
@@ -31634,10 +31778,20 @@ $kendo-infinite-calendar-view-height: ( $kendo-calendar-cell-size * 9 ) !default
 
 // Multiview calendar
 
+/// The border radius of the range cells in the Multiview Calendar.
+/// @group calendar
+$kendo-calendar-range-cell-border-radius: k-border-radius(lg) !default;
 
 // Calendar sizes
+
+/// The font size of the small Calendar.
+/// @group calendar
 $kendo-calendar-sm-font-size: var( --kendo-font-size, inherit ) !default;
+/// The line height of the small Calendar.
+/// @group calendar
 $kendo-calendar-sm-line-height: var( --kendo-line-height, normal ) !default;
+/// The size of the cells in the small Calendar.
+/// @group calendar
 $kendo-calendar-sm-cell-size: 34px !default;
 /// The horizontal padding of the cells in the small Calendar.
 /// @group calendar
@@ -31646,10 +31800,15 @@ $kendo-calendar-sm-cell-padding-x: k-spacing(0.5) !default;
 /// @group calendar
 $kendo-calendar-sm-cell-padding-y: k-spacing(0.5) !default;
 
+/// The font size of the medium Calendar.
+/// @group calendar
 $kendo-calendar-md-font-size: var( --kendo-font-size, inherit ) !default;
+/// The line height of the medium Calendar.
+/// @group calendar
 $kendo-calendar-md-line-height: var( --kendo-line-height, normal ) !default;
+/// The size of the cells in the medium Calendar.
+/// @group calendar
 $kendo-calendar-md-cell-size: 38px !default;
-
 /// The horizontal padding of the cells in the medium Calendar.
 /// @group calendar
 $kendo-calendar-md-cell-padding-x: k-spacing(1) !default;
@@ -31657,10 +31816,15 @@ $kendo-calendar-md-cell-padding-x: k-spacing(1) !default;
 /// @group calendar
 $kendo-calendar-md-cell-padding-y: k-spacing(1) !default;
 
+/// The font size of the large Calendar.
+/// @group calendar
 $kendo-calendar-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;
+/// The line height of the large Calendar.
+/// @group calendar
 $kendo-calendar-lg-line-height: var( --kendo-line-height-lg, normal ) !default;
+/// The size of the cells in the large Calendar.
+/// @group calendar
 $kendo-calendar-lg-cell-size: 42px !default;
-
 /// The horizontal padding of the cells in the large Calendar.
 /// @group calendar
 $kendo-calendar-lg-cell-padding-x: k-spacing(1) !default;
@@ -32148,9 +32312,6 @@ $kendo-calendar-sizes: (
         // }
     }
 
-
-
-
     // Multiview calendar
     .k-calendar-range {
         width: auto;
@@ -32167,25 +32328,34 @@ $kendo-calendar-sizes: (
                 outline: 0;
             }
         }
+    }
 
-        .k-range-start {
-            border-color: inherit;
-            border-top-right-radius: 0;
-            border-bottom-right-radius: 0;
-        }
-        .k-range-end {
+    // Range Selection
+    .k-range-start {
+        border-radius: $kendo-calendar-range-cell-border-radius 0 0 $kendo-calendar-range-cell-border-radius;
+
+        .k-calendar-cell-inner,
+        .k-link {
             border-color: inherit;
-            border-top-left-radius: 0;
-            border-bottom-left-radius: 0;
+            border-radius: inherit;
         }
-        .k-range-mid {
+    }
+    .k-range-end {
+        border-radius: 0 $kendo-calendar-range-cell-border-radius $kendo-calendar-range-cell-border-radius 0;
+
+        .k-calendar-cell-inner,
+        .k-link {
             border-color: inherit;
-            border-radius: 0;
+            border-radius: inherit;
         }
     }
-
-
-
+    .k-range-mid {
+        border-color: inherit;
+        border-radius: 0;
+    }
+    .k-range-start.k-range-end {
+        border-radius: $kendo-calendar-range-cell-border-radius;
+    }
 
     // RTL
     .k-rtl .k-calendar,
@@ -32198,6 +32368,14 @@ $kendo-calendar-sizes: (
             @include hide-scrollbar("left");
         }
 
+        // Range Selection RTL
+        .k-range-start {
+            border-radius: 0 $kendo-calendar-range-cell-border-radius $kendo-calendar-range-cell-border-radius 0;
+        }
+        .k-range-end {
+            border-radius: $kendo-calendar-range-cell-border-radius 0 0 $kendo-calendar-range-cell-border-radius;
+        }
+
     }
 
 }
@@ -32384,11 +32562,6 @@ $kendo-calendar-sizes: (
             background-color: $kendo-calendar-range-bg;
         }
 
-        .k-range-start.k-range-end {
-            background-image: none;
-            background-color: transparent;
-        }
-
         .k-range-start,
         .k-range-end {
             .k-calendar-cell-inner {
@@ -37012,7 +37185,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;
@@ -37061,7 +37234,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;
@@ -40452,13 +40625,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
@@ -40605,6 +40788,8 @@ $kendo-drawer-selected-hover-text: $kendo-selected-text !default;
     .k-drawer-content {
         flex: 1 1 auto;
         overflow: auto;
+        padding-block: $kendo-drawer-content-padding-y;
+        padding-inline: $kendo-drawer-content-padding-x;
     }
 
 
@@ -44481,120 +44666,161 @@ $_kendo-module-meta: (
 
 // Component
 // #region @import "./_variables.scss"; -> scss/tabstrip/_variables.scss
-// Tabstrip
+// TabStrip
+
 
+/// The horizontal padding of the TabStrip wrapper.
+/// @group tabstrip
 $kendo-tabstrip-wrapper-padding-x: k-spacing(0) !default;
+/// The vertical padding of the TabStrip wrapper.
+/// @group tabstrip
 $kendo-tabstrip-wrapper-padding-y: k-spacing(0) !default;
+/// The border width around the TabStrip wrapper.
+/// @group tabstrip
 $kendo-tabstrip-wrapper-border-width: 0px !default;
 
+/// The font family of the TabStrip.
+/// @group tabstrip
 $kendo-tabstrip-font-family: var( --kendo-font-family, inherit ) !default;
+/// The font size of the TabStrip.
+/// @group tabstrip
 $kendo-tabstrip-font-size: var( --kendo-font-size, inherit ) !default;
+/// The line height of the TabStrip.
+/// @group tabstrip
 $kendo-tabstrip-line-height: var( --kendo-line-height, normal ) !default;
+/// The border width around the TabStrip.
+/// @group tabstrip
 $kendo-tabstrip-border-width: 1px !default;
 
+/// The background color of the TabStrip wrapper.
+/// @group tabstrip
 $kendo-tabstrip-wrapper-bg: null !default;
+/// The text color of the TabStrip wrapper.
+/// @group tabstrip
 $kendo-tabstrip-wrapper-text: null !default;
+/// The border color of the TabStrip wrapper.
+/// @group tabstrip
 $kendo-tabstrip-wrapper-border: null !default;
 
-/// Background color of tabstrip component
+/// The background color of the TabStrip.
 /// @group tabstrip
 $kendo-tabstrip-bg: null !default;
-/// Text color of tabstrip component
+/// The text color of the TabStrip.
 /// @group tabstrip
 $kendo-tabstrip-text: $kendo-component-text !default;
-/// Border color of tabstrip component
+/// The border color of the TabStrip.
 /// @group tabstrip
 $kendo-tabstrip-border: $kendo-component-border !default;
 
-/// Horizontal padding of tabs
+/// The horizontal padding of the TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-padding-x: $nav-link-padding-x !default;
-/// Vertical padding of tabs
+/// The vertical padding of the TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-padding-y: $nav-link-padding-y !default;
-/// Width of border around tabs
+/// The border width around the TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-border-width: 1px !default;
-/// Border radius of tabs
+/// The border radius of the TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-border-radius: k-spacing(1) !default;
-/// Spacing between tabs
+/// The gap between the TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-gap: k-spacing(0) !default;
 
-/// Background color of tabs
+///  The background color of the TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-bg: null !default;
-/// Text color of tabs
+/// The text color of the TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-text: $kendo-link-text !default;
-/// Border color of tabs
+/// The border color of the TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-border: null !default;
-/// Background gradient of tabs
+/// The gradient of the TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-gradient: null !default;
 
-/// Background color of hovered tabs
+/// The background color of the hovered TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-hover-bg: null !default;
-/// Text color of hovered tabs
+/// The text color of the hovered TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-hover-text: $kendo-link-hover-text !default;
-/// Border color of hovered tabs
+/// The border color of the hovered TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-hover-border: $gray-200 !default;
-/// Background gradient of hovered tabs
+$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;
 
-/// Background color of selected tabs
+/// The background color of the selected TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-selected-bg: $kendo-component-bg !default;
-/// Text color of selected tabs
+/// The text color of the selected TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-selected-text: $kendo-component-text !default;
-/// Border color of selected tabs
+/// The border color of the selected TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-selected-border: $kendo-component-border !default;
-/// Background gradient of selected tabs
+/// The gradient of the selected TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-selected-gradient: null !default;
 
+/// The shadow of the focused TabStrip items.
+/// @group tabstrip
 $kendo-tabstrip-item-focus-shadow: $kendo-list-item-focus-shadow !default;
 
+/// The shadow of the dragged TabStrip items.
+/// @group tabstrip
 $kendo-tabstrip-item-dragging-shadow: k-elevation(3) !default;
 
+/// The background color of the disabled TabStrip items.
+/// @group tabstrip
 $kendo-tabstrip-item-disabled-bg: null !default;
+/// The text color of the disabled TabStrip items.
+/// @group tabstrip
 $kendo-tabstrip-item-disabled-text: null !default;
+/// The border color of the disabled TabStrip items.
+/// @group tabstrip
 $kendo-tabstrip-item-disabled-border: null !default;
+/// The gradient of the disabled TabStrip items.
+/// @group tabstrip
 $kendo-tabstrip-item-disabled-gradient: null !default;
+/// The opacity of the disabled TabStrip items.
+/// @group tabstrip
 $kendo-tabstrip-item-disabled-opacity: null !default;
+/// The filter of the disabled TabStrip items.
+/// @group tabstrip
 $kendo-tabstrip-item-disabled-filter: null !default;
 
+/// The border width of the TabStrip indicator.
+/// @group tabstrip
 $kendo-tabstrip-indicator-size: null !default;
+/// The border color of the TabStrip ripple.
+/// @group tabstrip
 $kendo-tabstrip-indicator-color: null !default;
 
-/// Horizontal padding of tabstrip content
+/// The horizontal padding of the TabStrip content.
 /// @group tabstrip
 $kendo-tabstrip-content-padding-x: k-spacing(4) !default;
-/// Vertical padding of tabstrip content
+/// The vertical padding of the TabStrip content.
 /// @group tabstrip
 $kendo-tabstrip-content-padding-y: k-spacing(4) !default;
-/// Width of border around tabstrip content
+/// The border width around the TabStrip content.
 /// @group tabstrip
 $kendo-tabstrip-content-border-width: $kendo-tabstrip-border-width !default;
 
-/// Background color of tabstrip content
+/// The background color of the TabStrip content.
 /// @group tabstrip
 $kendo-tabstrip-content-bg: $kendo-component-bg !default;
-/// Text color of tabstrip content
+/// The text color of the TabStrip content.
 /// @group tabstrip
 $kendo-tabstrip-content-text: $kendo-component-text !default;
-/// Border color of tabstrip content
+/// The border color of the TabStrip content.
 /// @group tabstrip
 $kendo-tabstrip-content-border: $kendo-component-border !default;
-/// Border color of tabstrip focused content
+/// The border color of the focused TabStrip content.
 /// @group tabstrip
 $kendo-tabstrip-content-focus-border: $kendo-component-text !default;
 
@@ -46809,7 +47035,7 @@ $_kendo-module-meta: (
 $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
@@ -51143,6 +51369,7 @@ $kendo-listview-item-focus-shadow: inset 0 0 0 3px if($kendo-enable-color-system
         font-family: $kendo-listview-font-family;
         font-size: $kendo-listview-font-size;
         line-height: $kendo-listview-line-height;
+        display: flex;
         flex-flow: column nowrap;
         position: relative;
         -webkit-touch-callout: none;
@@ -51723,7 +51950,7 @@ $kendo-spreadsheet-dropzone-spacing-y: k-spacing(4) !default;
 
     // Spreadsheet
     .k-spreadsheet {
-        width: 800px;
+        width: 100%;
         height: 600px;
         border-width: $kendo-spreadsheet-border-width;
         border-style: solid;
@@ -58691,96 +58918,239 @@ $_kendo-module-meta: (
 // Component
 // #region @import "./_variables.scss"; -> scss/scheduler/_variables.scss
 // Scheduler
+
+/// The width of the border around the Scheduler.
+/// @group scheduler
 $kendo-scheduler-border-width: 1px !default;
+/// The font family of the Scheduler.
+/// @group scheduler
 $kendo-scheduler-font-family: var( --kendo-font-family, inherit ) !default;
+/// The font size of the Scheduler.
+/// @group scheduler
 $kendo-scheduler-font-size: var( --kendo-font-size, inherit ) !default;
+/// The line height of the Scheduler.
+/// @group scheduler
 $kendo-scheduler-line-height: var( --kendo-line-height, normal ) !default;
 
+/// The background color of the Scheduler.
+/// @group scheduler
 $kendo-scheduler-bg: $kendo-component-bg !default;
+/// The text color of the Scheduler.
+/// @group scheduler
 $kendo-scheduler-text: $kendo-component-text !default;
+/// The border color of the Scheduler.
+/// @group scheduler
 $kendo-scheduler-border: $kendo-component-border !default;
 
+/// The background color of the Scheduler ToolBar.
+/// @group scheduler
 $kendo-scheduler-toolbar-bg: $kendo-toolbar-bg !default;
+/// The text color of the Scheduler ToolBar.
+/// @group scheduler
 $kendo-scheduler-toolbar-text: $kendo-toolbar-text !default;
+/// The border color of the Scheduler ToolBar.
+/// @group scheduler
 $kendo-scheduler-toolbar-border: $kendo-toolbar-border !default;
+/// The gradient of the Scheduler ToolBar.
+/// @group scheduler
 $kendo-scheduler-toolbar-gradient: $kendo-toolbar-gradient !default;
 
+/// The background color of the Scheduler footer.
+/// @group scheduler
 $kendo-scheduler-footer-bg: $kendo-toolbar-bg !default;
+/// The text color of the Scheduler footer.
+/// @group scheduler
 $kendo-scheduler-footer-text: $kendo-toolbar-text !default;
+/// The border color of the Scheduler footer.
+/// @group scheduler
 $kendo-scheduler-footer-border: $kendo-toolbar-border !default;
+/// The gradient of the Scheduler footer.
+/// @group scheduler
 $kendo-scheduler-footer-gradient: $kendo-toolbar-gradient !default;
 
+/// The minimum height of the Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-min-height: 25px !default;
+/// The border radius of the Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-border-radius: k-border-radius(md) !default;
+/// The line height of the Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-line-height: calc( #{$kendo-scheduler-event-min-height} - (2 * #{$kendo-padding-sm-y}) ) !default;
 
+/// The background color of the Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-bg: if($kendo-enable-color-system, k-color( primary ), k-color-tint( $kendo-selected-bg, 2 )) !default;
+/// The text color of the Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-text: $kendo-selected-text !default;
+/// The border color of the Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-border: null !default;
+/// The gradient of the Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-gradient: null !default;
+/// The shadow of the Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-shadow: null !default;
 
+/// The background color of the hovered Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-hover-bg: null !default;
+/// The text color of the hovered Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-hover-text: null !default;
+/// The border color of the hovered Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-hover-border: null !default;
+/// The gradient of the hovered Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-hover-gradient: null !default;
+/// The shadow of the hovered Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-hover-shadow: null !default;
 
+/// The background color of the selected Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-selected-bg: $kendo-selected-bg !default;
+/// The text color of the selected Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-selected-text: $kendo-selected-text !default;
+/// The border color of the selected Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-selected-border: null !default;
+/// The gradient of the selected Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-selected-gradient: null !default;
+/// The shadow of the selected Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-selected-shadow: inset 0 0 0 3px rgba( white, .5 ) !default;
 
+/// The shadow of the ongoing Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-ongoing-shadow: inset 0px 0px 0px 1px #ff0000 !default;
 
+/// The horizontal padding of the Scheduler cell.
+/// @group scheduler
 $kendo-scheduler-cell-padding-x: k-spacing(3) !default;
+/// The vertical padding of the Scheduler cell.
+/// @group scheduler
 $kendo-scheduler-cell-padding-y: k-spacing(3) !default;
+/// The height of the Scheduler cell.
+/// @group scheduler
 $kendo-scheduler-cell-height: $kendo-line-height-em !default;
+/// The width of the Scheduler date column.
+/// @group scheduler
 $kendo-scheduler-datecolumn-width: 12em !default;
+/// The width of the Scheduler time column.
+/// @group scheduler
 $kendo-scheduler-timecolumn-width: 11em !default;
 
+/// The background color of the non-working hours in the Scheduler.
+/// @group scheduler
 $kendo-scheduler-nonwork-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-scheduler-bg, .5 )) !default;
+/// The text color of the non-working hours in the Scheduler.
+/// @group scheduler
 $kendo-scheduler-nonwork-text: null !default;
 
+/// The background color of the weekends in the Scheduler.
+/// @group scheduler
 $kendo-scheduler-weekend-bg: null !default;
+/// The text color of the weekends in the Scheduler.
+/// @group scheduler
 $kendo-scheduler-weekend-text: null !default;
 
+/// The background color of the preceding/subsequent month cells in the Calendar.
+/// @group scheduler
 $kendo-scheduler-othermonth-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-scheduler-bg, .5 )) !default;
+/// The text color of the preceding/subsequent month cells in the Calendar.
+/// @group scheduler
 $kendo-scheduler-othermonth-text: null !default;
 
+/// The horizontal padding of the year view in the Scheduler.
+/// @group scheduler
 $kendo-scheduler-yearview-padding-x: k-spacing(4) !default;
+/// The vertical padding of the year view in the Scheduler.
+/// @group scheduler
 $kendo-scheduler-yearview-padding-y: $kendo-scheduler-yearview-padding-x !default;
 
+/// The spacing between the calendars of the year view in the Scheduler.
+/// @group scheduler
 $kendo-scheduler-yearview-calendar-gap: k-spacing(4) !default;
 
+/// The days with events indicator size of the year view in the Scheduler.
+/// @group scheduler
 $kendo-scheduler-yearview-indicator-size: 3px !default;
+/// The top position of the days with events indicator of the year view in the Scheduler.
+/// @group scheduler
 $kendo-scheduler-yearview-indicator-calc-offset-top: calc( #{$kendo-calendar-cell-size} - (#{$kendo-calendar-cell-padding-y} * 2)) !default;
+/// The left position of the days with events indicator of the year view in the Scheduler.
+/// @group scheduler
 $kendo-scheduler-yearview-indicator-calc-offset-left: calc( 50% - #{k-math-div( $kendo-scheduler-yearview-indicator-size, 2)} ) !default;
+/// The border radius of the days with events indicator of the year view in the Scheduler.
+/// @group scheduler
 $kendo-scheduler-yearview-indicator-border-radius: 50% !default;
+/// The background color of the days with events indicator of the year view in the Scheduler.
+/// @group scheduler
 $kendo-scheduler-yearview-indicator-bg: $kendo-color-primary !default;
+/// The background color of the selected days with events indicator of the year view in the Scheduler.
+/// @group scheduler
 $kendo-scheduler-yearview-indicator-selected-bg: $kendo-color-primary-contrast !default;
 
+/// The horizontal padding of the Scheduler Tooltip.
+/// @group scheduler
 $kendo-scheduler-tooltip-padding-x: k-spacing(3) !default;
+/// The vertical padding of the Scheduler Tooltip.
+/// @group scheduler
 $kendo-scheduler-tooltip-padding-y: k-spacing(3) !default;
+/// The width of the border of the Scheduler Tooltip.
+/// @group scheduler
 $kendo-scheduler-tooltip-border-width: 0 !default;
+/// The background color of the Scheduler Tooltip.
+/// @group scheduler
 $kendo-scheduler-tooltip-bg: $kendo-color-primary-contrast !default;
+/// The text color of the Scheduler Tooltip.
+/// @group scheduler
 $kendo-scheduler-tooltip-text: $kendo-base-text !default;
+/// The border color of the Scheduler Tooltip.
+/// @group scheduler
 $kendo-scheduler-tooltip-border: null !default;
+/// The shadow of the Scheduler Tooltip.
+/// @group scheduler
 $kendo-scheduler-tooltip-shadow: k-elevation(2) !default;
 
+/// The vertical margin of the Scheduler Tooltip title.
+/// @group scheduler
 $kendo-scheduler-tooltip-title-margin-y: k-spacing(3) !default;
+/// The font size of the month inside the Scheduler Tooltip.
+/// @group scheduler
 $kendo-scheduler-tooltip-month-font-size: var( --kendo-font-size-sm, inherit ) !default;
-$kendo-scheduler-tooltip-day-font-size: calc( #{$kendo-scheduler-tooltip-month-font-size} * 2 ) !default;
+/// The font size of the day inside the Scheduler Tooltip.
+/// @group scheduler
+$kendo-scheduler-tooltip-day-font-size: calc( var( --kendo-font-size-sm, #{$kendo-font-size-sm} ) * 2 ) !default;
 
+/// The max height of the events inside the Scheduler Tooltip.
+/// @group scheduler
 $kendo-scheduler-tooltip-events-max-height: 250px !default;
+/// The spacing between the events inside the Scheduler Tooltip.
+/// @group scheduler
 $kendo-scheduler-tooltip-events-gap: k-spacing(2) !default;
 
+/// The horizontal padding of the events inside the Scheduler Tooltip.
+/// @group scheduler
 $kendo-scheduler-tooltip-event-padding-x: k-spacing(2) !default;
+/// The vertical padding of the events inside the Scheduler Tooltip.
+/// @group scheduler
 $kendo-scheduler-tooltip-event-padding-y: k-spacing(1) !default;
+/// The border radius of the events inside the Scheduler Tooltip.
+/// @group scheduler
 $kendo-scheduler-tooltip-event-border-radius: k-border-radius(md) !default;
+/// The spacing between the events items inside the Scheduler Tooltip.
+/// @group scheduler
 $kendo-scheduler-tooltip-event-gap: k-spacing(2) !default;
 
+/// The color of the Scheduler Tooltip callout.
+/// @group scheduler
 $kendo-scheduler-tooltip-callout-text: $kendo-scheduler-tooltip-bg !default;
 
 // #endregion
@@ -61317,7 +61687,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;
@@ -62844,8 +63214,8 @@ $kendo-scrollview-transition-timing-function: ease-in-out !default;
 
         &::before {
             content: "";
-            width: ($kendo-scrollview-pagebutton-size + $kendo-scrollview-pager-item-spacing);
-            height: ($kendo-scrollview-pagebutton-size + $kendo-scrollview-pager-item-spacing);
+            width: calc( #{$kendo-scrollview-pagebutton-size} + #{$kendo-scrollview-pager-item-spacing} );
+            height: calc( #{$kendo-scrollview-pagebutton-size} + #{$kendo-scrollview-pager-item-spacing} );
             display: block;
             position: absolute;
             top: 50%;
@@ -63493,7 +63863,7 @@ $kendo-chart-line-height: var( --kendo-line-height, normal )!default;
 $kendo-chart-sm-font-size: 11px !default;
 $kendo-chart-md-font-size: 12px !default;
 $kendo-chart-lg-font-size: 16px !default;
-$kendo-chart-tooltip-font-size: calc( var( --kendo-font-size, inherit ) * .929) !default;
+$kendo-chart-tooltip-font-size: calc( #{$kendo-font-size} * .929) !default;
 $kendo-chart-label-font-size: .857em !default;
 $kendo-chart-title-font-size: 1.143em !default;
 $kendo-chart-pane-title-font-size: $kendo-chart-label-font-size !default;
@@ -63812,7 +64182,10 @@ $kendo-treemap-line-height: var( --kendo-line-height, normal ) !default;
     }
 
 
-
+    // Sankey labels
+    .k-sankey text {
+        pointer-events: none;
+    }
 
     // Treemap
     .k-treemap {