@progress/kendo-theme-material 8.0.0-dev.8 → 8.0.0

package/dist/all.scss

@@ -3092,7 +3092,7 @@ $_default-colors: (
     light-emphasis: k-map-get( $kendo-palette-gray, 5 ),
     light-on-subtle: k-map-get( $kendo-palette-gray, 15 ),
     on-light: k-map-get( $kendo-palette-gray, black ),
-    light-on-surface: k-map-get( $kendo-palette-gray, 13 ),
+    light-on-surface: k-map-get( $kendo-palette-gray, 4 ),
     // Dark
     dark-subtle: k-map-get( $kendo-palette-gray, 7 ),
     dark-subtle-hover: k-map-get( $kendo-palette-gray, 8 ),
@@ -3689,6 +3689,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
@@ -4120,12 +4121,38 @@ $kendo-padding-lg-y: k-spacing(1.5) !default;
 
 // Radii
 // #region @import "./border-radii/index.import.scss"; -> scss/core/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, 2) !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, 5) !default;
 
+/// The global radii Map.
+/// @group radii
 $kendo-border-radii: (
+    none: $kendo-border-radius-none,
+    xs: $kendo-border-radius-xs,
+    sm: $kendo-border-radius-sm,
+    md: $kendo-border-radius-md,
     lg: $kendo-border-radius-lg,
     xl: $kendo-border-radius-xl,
     xxl: $kendo-border-radius-xxl,
@@ -4133,14 +4160,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;
 
 
@@ -4159,6 +4204,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);
 
 
@@ -7088,6 +7135,7 @@ $kendo-zindex-loading: 100 !default;
 @if ($kendo-enable-color-system) {
     $kendo-color-primary: k-color( primary );
     $kendo-color-primary-contrast: k-color( on-primary );
+    $kendo-color-primary-darker: k-color( primary-active );
     $kendo-color-secondary: k-color( secondary );
     $kendo-color-secondary-contrast: k-color( on-secondary );
     $kendo-color-tertiary: k-color( tertiary );
@@ -7148,7 +7196,6 @@ $kendo-zindex-loading: 100 !default;
         "inverse": $kendo-color-inverse,
     );
 
-
 }
 
 // #endregion
@@ -16189,48 +16236,124 @@ $_kendo-module-meta: (
 
 
 // Headings
+
+/// The font size of the highest level heading.
+/// @group typography
 $kendo-h1-font-size: 96px !default;
+/// The font size of the second highest level heading.
+/// @group typography
 $kendo-h2-font-size: 60px !default;
+/// The font size of the third highest level heading.
+/// @group typography
 $kendo-h3-font-size: 48px !default;
+/// The font size of the fourth highest level heading.
+/// @group typography
 $kendo-h4-font-size: 34px !default;
+/// The font size of the fifth highest level heading.
+/// @group typography
 $kendo-h5-font-size: 24px !default;
+/// The font size of the sixth highest level heading.
+/// @group typography
 $kendo-h6-font-size: 20px !default;
 
+/// The font family of the highest level heading.
+/// @group typography
 $kendo-h1-font-family: var( --kendo-font-family, inherit ) !default;
+/// The font family of the second highest level heading.
+/// @group typography
 $kendo-h2-font-family: var( --kendo-font-family, inherit ) !default;
+/// The font family of the third highest level heading.
+/// @group typography
 $kendo-h3-font-family: var( --kendo-font-family, inherit ) !default;
+/// The font family of the fourth highest level heading.
+/// @group typography
 $kendo-h4-font-family: var( --kendo-font-family, inherit ) !default;
+/// The font family of the fifth highest level heading.
+/// @group typography
 $kendo-h5-font-family: var( --kendo-font-family, inherit ) !default;
+/// The font family of the sixth highest level heading.
+/// @group typography
 $kendo-h6-font-family: var( --kendo-font-family, inherit ) !default;
 
+/// The line height of the highest level heading.
+/// @group typography
 $kendo-h1-line-height: 112px !default;
+/// The line height of the second highest level heading.
+/// @group typography
 $kendo-h2-line-height: 72px !default;
+/// The line height of the third highest level heading.
+/// @group typography
 $kendo-h3-line-height: 56px !default;
+/// The line height of the fourth highest level heading.
+/// @group typography
 $kendo-h4-line-height: 36px !default;
+/// The line height of the fifth highest level heading.
+/// @group typography
 $kendo-h5-line-height: 24px !default;
+/// The line height of the sixth highest level heading.
+/// @group typography
 $kendo-h6-line-height: 24px !default;
 
+/// The font weight of the highest level heading.
+/// @group typography
 $kendo-h1-font-weight: var( --kendo-font-weight-light, normal ) !default;
+/// The font weight of the second highest level heading.
+/// @group typography
 $kendo-h2-font-weight: var( --kendo-font-weight-light, normal ) !default;
+/// The font weight of the third highest level heading.
+/// @group typography
 $kendo-h3-font-weight: var( --kendo-font-weight-normal, normal ) !default;
+/// The font weight of the fourth highest level heading.
+/// @group typography
 $kendo-h4-font-weight: var( --kendo-font-weight-normal, normal ) !default;
+/// The font weight of the fifth highest level heading.
+/// @group typography
 $kendo-h5-font-weight: var( --kendo-font-weight-normal, normal ) !default;
+/// The font weight of the sixth highest level heading.
+/// @group typography
 $kendo-h6-font-weight: var( --kendo-font-weight-medium, normal ) !default;
 
+/// The letter spacing of the highest level heading.
+/// @group typography
 $kendo-h1-letter-spacing: var( --kendo-letter-spacing-tighter, normal ) !default;
+/// The letter spacing of the second highest level heading.
+/// @group typography
 $kendo-h2-letter-spacing: var( --kendo-letter-spacing-tight, normal ) !default;
+/// The letter spacing of the third highest level heading.
+/// @group typography
 $kendo-h3-letter-spacing: var( --kendo-letter-spacing-normal, normal ) !default;
+/// The letter spacing of the fourth highest level heading.
+/// @group typography
 $kendo-h4-letter-spacing: var( --kendo-letter-spacing-wider, normal ) !default;
+/// The letter spacing of the fifth highest level heading.
+/// @group typography
 $kendo-h5-letter-spacing: var( --kendo-letter-spacing-normal, normal ) !default;
+/// The letter spacing of the sixth highest level heading.
+/// @group typography
 $kendo-h6-letter-spacing: var( --kendo-letter-spacing-wide, normal ) !default;
 
+
+/// The margin of the highest level heading.
+/// @group typography
 $kendo-h1-margin: 0 0 12px !default;
+/// The margin of the second highest level heading.
+/// @group typography
 $kendo-h2-margin: 0 0 12px !default;
+/// The margin of the third highest level heading.
+/// @group typography
 $kendo-h3-margin: 0 0 12px !default;
+/// The margin of the fourth highest level heading.
+/// @group typography
 $kendo-h4-margin: 0 0 12px !default;
+/// The margin of the fifth highest level heading.
+/// @group typography
 $kendo-h5-margin: 0 0 12px !default;
+/// The margin of the sixth highest level heading.
+/// @group typography
 $kendo-h6-margin: 0 0 12px !default;
 
+/// The headings Map.
+/// @group typography
 $kendo-headings: (
     h1: (
         font-size: $kendo-h1-font-size,
@@ -16285,58 +16408,140 @@ $kendo-headings: (
 
 
 // Paragraph
+
+/// The margin of the paragraph.
+/// @group typography
 $kendo-paragraph-margin: 0 0 12px !default;
+/// The font size of the paragraph.
+/// @group typography
 $kendo-paragraph-font-size: 1rem !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-lg, 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: .0313em !default;
 
 
 // Code
+
+/// The font size of the code tag.
+/// @group typography
 $kendo-code-font-size: var( --kendo-font-size, 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 border width 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: calc( var( --kendo-font-size, .875rem ) * 9.5 ) !default;
+/// The font size of the second largest display text.
+/// @group typography
 $kendo-display2-font-size: calc( var( --kendo-font-size, .875rem ) * 8.75 ) !default;
+/// The font size of the third largest display text.
+/// @group typography
 $kendo-display3-font-size: calc( var( --kendo-font-size, .875rem ) * 8 ) !default;
+/// The font size of the fourth largest display text.
+/// @group typography
 $kendo-display4-font-size: calc( var( --kendo-font-size, .875rem ) * 7.25 ) !default;
 
+/// The font family of the largest display text.
+/// @group typography
 $kendo-display1-font-family: var( --kendo-font-family, inherit ) !default;
+/// The font family of the second largest display text.
+/// @group typography
 $kendo-display2-font-family: var( --kendo-font-family, inherit ) !default;
+/// The font family of the third largest display text.
+/// @group typography
 $kendo-display3-font-family: var( --kendo-font-family, inherit ) !default;
+/// The font family of the fourth largest display text.
+/// @group typography
 $kendo-display4-font-family: var( --kendo-font-family, inherit ) !default;
 
+/// The line height of the largest display text.
+/// @group typography
 $kendo-display1-line-height: 1.2 !default;
+/// The line height of the second largest display text.
+/// @group typography
 $kendo-display2-line-height: 1.2 !default;
+/// The line height of the third largest display text.
+/// @group typography
 $kendo-display3-line-height: 1.2 !default;
+/// The line height of the fourth largest display text.
+/// @group typography
 $kendo-display4-line-height: 1.2 !default;
 
+/// The font weight of the largest display text.
+/// @group typography
 $kendo-display1-font-weight: var( --kendo-font-weight-light, normal ) !default;
+/// The font weight of the second largest display text.
+/// @group typography
 $kendo-display2-font-weight: var( --kendo-font-weight-light, normal ) !default;
+/// The font weight of the third largest display text.
+/// @group typography
 $kendo-display3-font-weight: var( --kendo-font-weight-light, normal ) !default;
+/// The font weight of the fourth largest display text.
+/// @group typography
 $kendo-display4-font-weight: var( --kendo-font-weight-light, normal ) !default;
 
+/// The letter spacing of the largest display text.
+/// @group typography
 $kendo-display1-letter-spacing: var( --kendo-letter-spacing-tighter, normal ) !default;
+/// The letter spacing of the second largest display text.
+/// @group typography
 $kendo-display2-letter-spacing: var( --kendo-letter-spacing-tighter, normal ) !default;
+/// The letter spacing of the third largest display text.
+/// @group typography
 $kendo-display3-letter-spacing: var( --kendo-letter-spacing-tighter, normal ) !default;
+/// The letter spacing of the fourth largest display text.
+/// @group typography
 $kendo-display4-letter-spacing: var( --kendo-letter-spacing-tighter, normal ) !default;
 
+/// The displays Map.
+/// @group typography
 $kendo-display: (
     1: (
         font-size: $kendo-display1-font-size,
@@ -17591,7 +17796,7 @@ $kendo-checkbox-bg: null !default;
 $kendo-checkbox-text: null !default;
 /// The border color of the CheckBox.
 /// @group checkbox
-$kendo-checkbox-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 54%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .54 )) !default;
+$kendo-checkbox-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 44%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .54 )) !default;
 
 /// The background color of the hovered CheckBox.
 /// @group checkbox
@@ -20577,7 +20782,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 {
@@ -20779,13 +20984,13 @@ $kendo-button-shadow: $box-shadow-depth-2 !default;
 
 /// The base background of the hovered Button.
 /// @group button
-$kendo-button-hover-bg: null !default;
+$kendo-button-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), null) !default;
 /// The base text color of the hovered Button.
 /// @group button
 $kendo-button-hover-text: null !default;
 /// The base border color of the hovered Button.
 /// @group button
-$kendo-button-hover-border: null !default;
+$kendo-button-hover-border: if($kendo-enable-color-system, k-color( base-hover ), null) !default;
 /// The base background gradient of the hovered Button.
 /// @group button
 $kendo-button-hover-gradient: null !default;
@@ -20795,13 +21000,13 @@ $kendo-button-hover-shadow: null !default;
 
 /// The base background color of the active Button.
 /// @group button
-$kendo-button-active-bg: null !default;
+$kendo-button-active-bg: if($kendo-enable-color-system, k-color( base-active ), null) !default;
 /// The base text color of the active Button.
 /// @group button
 $kendo-button-active-text: null !default;
 /// The base border color of the active Button.
 /// @group button
-$kendo-button-active-border: null !default;
+$kendo-button-active-border: if($kendo-enable-color-system, k-color( base-active ), null) !default;
 /// The base background gradient of the active Button.
 /// @group button
 $kendo-button-active-gradient: null !default;
@@ -20827,19 +21032,19 @@ $kendo-button-selected-shadow: null !default;
 
 /// The base background of the focused Button.
 /// @group button
-$kendo-button-focus-bg: null !default;
+$kendo-button-focus-bg: if($kendo-enable-color-system, k-color( base-hover ), null) !default;
 /// The base text color of the focused Button.
 /// @group button
 $kendo-button-focus-text: null !default;
 /// The base border color of the focused Button.
 /// @group button
-$kendo-button-focus-border: null !default;
+$kendo-button-focus-border: if($kendo-enable-color-system, k-color( base-hover ), null) !default;
 /// The base background gradient of focused Button.
 /// @group button
 $kendo-button-focus-gradient: null !default;
 /// The base shadow of the focused Button.
 /// @group button
-$kendo-button-focus-shadow: null !default;
+$kendo-button-focus-shadow: $box-shadow-depth-3 !default;
 
 /// The base background color of the disabled Button.
 /// @group button
@@ -21057,7 +21262,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;
@@ -21329,7 +21534,7 @@ $kendo-chip-list-sizes: (
             @if ($name == "base") {
                 @include fill(
                     $kendo-chip-outline-text,
-                    $kendo-chip-outline-bg,
+                    transparent,
                     $kendo-chip-outline-border
                 );
 
@@ -21354,8 +21559,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))
                 );
 
@@ -21381,7 +21586,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% ))
                 );
 
@@ -21450,7 +21655,7 @@ $kendo-chip-list-sizes: (
                 }
             } @else if ($name == "warning") {
                 @include fill(
-                    $color: if($kendo-enable-color-system, $kendo-chip-outline-text, if( $kendo-is-dark-theme, k-try-shade( $color, 50% ), $kendo-chip-outline-text))
+                    $color: if($kendo-enable-color-system, k-color( on-app-surface ), if( $kendo-is-dark-theme, k-try-shade( $color, 50% ), k-color( on-app-surface )))
                 );
 
                 &:focus,
@@ -21463,14 +21668,14 @@ $kendo-chip-list-sizes: (
                 &.k-hover {
                     @include fill(
                         $bg: if($kendo-enable-color-system, k-color( #{$name}-subtle-hover ), k-try-tint( $color, 80% )),
-                        $color: if($kendo-enable-color-system, $kendo-chip-outline-text, if( $kendo-is-dark-theme, k-try-shade( $color, 50% ), $kendo-chip-outline-text))
+                        $color: if($kendo-enable-color-system, k-color( on-app-surface ), if( $kendo-is-dark-theme, k-try-shade( $color, 50% ), k-color( on-app-surface )))
                     );
                 }
 
                 &.k-selected {
                     @include fill(
                         $bg: if($kendo-enable-color-system, k-color( #{$name}-subtle-active ), k-try-tint( $color, 65% )),
-                        $color: if($kendo-enable-color-system, $kendo-chip-outline-text, if( $kendo-is-dark-theme, k-try-shade( $color, 50% ), $kendo-chip-outline-text))
+                        $color: if($kendo-enable-color-system, k-color( on-app-surface ), if( $kendo-is-dark-theme, k-try-shade( $color, 50% ), k-color( on-app-surface )))
                     );
                 }
             } @else {
@@ -23130,6 +23335,15 @@ $_kendo-module-meta: (
         }
     }
 
+    // Solid button
+    .k-button-solid {
+        &::before {
+            @if($kendo-enable-color-system) {
+                display: none;
+            }
+        }
+    }
+
     // Outline button
     .k-button-outline {
         background-color: transparent !important; // stylelint-disable-line declaration-no-important
@@ -23349,9 +23563,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(
@@ -23379,9 +23593,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(
@@ -23396,9 +23610,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(
@@ -23421,7 +23635,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,
@@ -23490,7 +23708,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,
@@ -23532,6 +23750,9 @@ $_kendo-module-meta: (
     @each $name, $color in $kendo-button-theme-colors {
         .k-button-solid-#{$name} {
             @include box-shadow( $kendo-button-shadow );
+
+            // These 3 lines can be deleted once we
+            // stop supporting the old color system.
             color: if( $name == "base", $kendo-button-text, if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-color( $color )) );
             background-color: if( $name == "base", $kendo-button-bg, if($kendo-enable-color-system, k-color( $name ), $color) );
             border-color: if( $name == "base", $kendo-button-bg, if($kendo-enable-color-system, k-color( $name ), $color) );
@@ -23545,6 +23766,8 @@ $_kendo-module-meta: (
             // Focus state
             &:focus,
             &.k-focus {
+                background-color: if($kendo-enable-color-system, k-color( #{$name}-hover ), null);
+                border-color: if($kendo-enable-color-system, k-color( #{$name}-hover ), null);
                 @include box-shadow( $kendo-button-focus-shadow );
             }
 
@@ -23571,7 +23794,14 @@ $_kendo-module-meta: (
     // Outline button
     @each $name, $color in $kendo-button-theme-colors {
         .k-button-outline-#{$name} {
-            color: if( $name == "base", $kendo-button-text, if($kendo-enable-color-system, k-color( #{$name}-on-surface ), $color) );
+
+            // The "base" case can be deleted once we
+            // stop supporting the old color system.
+            @if $name == "base" {
+                color: if($kendo-enable-color-system, k-color( base-on-surface ), $kendo-button-text)
+            } @else {
+                color: if($kendo-enable-color-system, k-color( #{$name}-on-surface ), $color)
+            }
 
             &:hover,
             &.k-hover,
@@ -23580,7 +23810,13 @@ $_kendo-module-meta: (
             &:active,
             &.k-active,
             &.k-selected {
-                color: if( $name == "base", $kendo-button-text, if($kendo-enable-color-system, k-color( #{$name}-on-surface ), $color) );
+                // The "base" case can be deleted once we
+                // stop supporting the old color system.
+                @if $name == "base" {
+                    color: if($kendo-enable-color-system, k-color( base-on-surface ), $kendo-button-text)
+                } @else {
+                    color: if($kendo-enable-color-system, k-color( #{$name}-on-surface ), $color)
+                }
             }
 
             // Disabled state
@@ -25010,6 +25246,33 @@ $kendo-toolbar-sizes: (
             background-color: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-button-bg ));
             border-color: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-button-bg ));
 
+            // Hover state
+            &:hover,
+            &.k-hover {
+                background-color: if($kendo-enable-color-system, k-color( base-subtle-hover ), null);
+                border-color: if($kendo-enable-color-system, k-color( base-subtle-hover ), null);
+            }
+
+            // Focus state
+            &:focus,
+            &.k-focus {
+                background-color: if($kendo-enable-color-system, k-color( base-subtle-hover ), null);
+                border-color: if($kendo-enable-color-system, k-color( base-subtle-hover ), null);
+            }
+
+            // Active state
+            &:active,
+            &.k-active {
+                background-color: if($kendo-enable-color-system, k-color( base-subtle-active ), null);
+                border-color: if($kendo-enable-color-system, k-color( base-subtle-active ), null);
+            }
+
+            // Selected state
+            &.k-selected {
+                background-color: if($kendo-enable-color-system, k-color( base-subtle-active ), null);
+                border-color: if($kendo-enable-color-system, k-color( base-subtle-active ), null);
+            }
+
             &.k-input-button,
             &.k-input-spinner .k-spinner-increase,
             &.k-input-spinner .k-spinner-decrease {
@@ -25730,7 +25993,7 @@ $kendo-tooltip-line-height: k-math-div( 20, 14 ) !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, .75rem ) * 1.25 ) !default;
 /// The line height of the Tooltip title.
 /// @group tooltip
 $kendo-tooltip-title-line-height: 1 !default;
@@ -31170,8 +31433,15 @@ $_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: k-math-div( 20, 14 ) !default;
 
 /// The size of the cells in the Calendar.
@@ -31252,7 +31522,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.
@@ -31964,9 +32238,6 @@ $kendo-calendar-sizes: (
         // }
     }
 
-
-
-
     // Multiview calendar
     .k-calendar-range {
         width: auto;
@@ -31983,25 +32254,34 @@ $kendo-calendar-sizes: (
                 outline: 0;
             }
         }
+    }
 
-        .k-range-start .k-calendar-cell-inner,
-        .k-range-start .k-link {
-            border-color: inherit;
-            border-radius: $kendo-calendar-range-cell-border-radius 0 0 $kendo-calendar-range-cell-border-radius;
-        }
-        .k-range-end .k-calendar-cell-inner,
-        .k-range-end .k-link {
+    // 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-radius: 0 $kendo-calendar-range-cell-border-radius $kendo-calendar-range-cell-border-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,
@@ -32014,21 +32294,14 @@ $kendo-calendar-sizes: (
             @include hide-scrollbar("left");
         }
 
-    }
-
-    .k-rtl .k-calendar-range,
-    [dir="rtl"] .k-calendar-range,
-    .k-calendar-range.k-rtl,
-    .k-calendar-range[dir="rtl"] {
-
-        .k-range-start .k-calendar-cell-inner,
-        .k-range-start .k-link {
+        // 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 .k-calendar-cell-inner,
-        .k-range-end .k-link {
+        .k-range-end {
             border-radius: $kendo-calendar-range-cell-border-radius 0 0 $kendo-calendar-range-cell-border-radius;
         }
+
     }
 
 }
@@ -32238,11 +32511,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 {
@@ -37015,7 +37283,7 @@ $kendo-switch-off-thumb-hover-gradient: null !default;
 
 /// The background of the track when the Switch is checked.
 /// @group switch
-$kendo-switch-on-track-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 54%, transparent), rgba( $kendo-color-primary, .54 )) !default;
+$kendo-switch-on-track-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 44%, transparent), rgba( $kendo-color-primary, .54 )) !default;
 /// The text color of the track when the Switch is checked.
 /// @group switch
 $kendo-switch-on-track-text: null !default;
@@ -40457,13 +40725,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
@@ -40610,6 +40888,8 @@ $kendo-drawer-selected-hover-text: $kendo-color-secondary !default;
     .k-drawer-content {
         flex: 1 1 auto;
         overflow: auto;
+        padding-block: $kendo-drawer-content-padding-y;
+        padding-inline: $kendo-drawer-content-padding-x;
     }
 
 
@@ -51068,6 +51348,7 @@ $kendo-listview-item-focus-shadow: null !default;
         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;
@@ -58972,7 +59253,7 @@ $kendo-scheduler-tooltip-title-margin-y: k-spacing(2) !default;
 $kendo-scheduler-tooltip-month-font-size: var( --kendo-font-size-sm, inherit ) !default;
 /// The font size of the day inside the Scheduler Tooltip.
 /// @group scheduler
-$kendo-scheduler-tooltip-day-font-size: calc( #{$kendo-scheduler-tooltip-month-font-size} * 2 ) !default;
+$kendo-scheduler-tooltip-day-font-size: calc( var( --kendo-font-size-sm, .75rem ) * 2 ) !default;
 
 /// The max height of the events inside the Scheduler Tooltip.
 /// @group scheduler
@@ -61687,7 +61968,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: #e0e0e0 !default;
+$kendo-timeline-track-bg: if($kendo-enable-color-system, k-color( base-subtle ), #e0e0e0) !default;
 /// The border color of the Timeline track.
 /// @group timeline
 $kendo-timeline-track-border-color: $kendo-timeline-track-bg !default;
@@ -64113,7 +64394,10 @@ $kendo-treemap-line-height: var( --kendo-line-height, normal ) !default;
     }
 
 
-
+    // Sankey labels
+    .k-sankey text {
+        pointer-events: none;
+    }
 
     // Treemap
     .k-treemap {