@progress/kendo-theme-material 11.0.0-dev.0 → 11.0.0

package/scss/spreadsheet/_layout.scss

@@ -1,4 +1,3 @@
-@use "../core/_index.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/spreadsheet/_layout.scss" as *;
 
 
@@ -6,19 +5,6 @@
 
     @include kendo-spreadsheet--layout-base();
 
-    // Quick access toolbar
-    .k-spreadsheet-quick-access-toolbar {
-        padding: k-spacing(1);
-
-        .k-button {
-            border-radius: 50%;
-            color: inherit;
-            background: none;
-            box-shadow: none;
-        }
-
-    }
-
     // Spreadsheet tabstrip
     .k-spreadsheet-tabstrip {
         padding-top: 0;
@@ -27,25 +13,4 @@
             border-width: 0;
         }
     }
-
-    // Spreadsheet footer
-    .k-spreadsheet-sheets-bar {
-
-        .k-spreadsheet-sheets-bar-add {
-            margin: k-spacing(1);
-            border-radius: 50%;
-            color: inherit;
-            background: none;
-            box-shadow: none;
-        }
-
-    }
-
-    // Selection
-    .k-spreadsheet .k-selection-full,
-    .k-spreadsheet .k-selection-partial {
-        &::after {
-            display: block;
-        }
-    }
 }

package/scss/spreadsheet/_theme.scss

@@ -5,31 +5,9 @@
 @mixin kendo-spreadsheet--theme() {
     @include kendo-spreadsheet--theme-base();
 
-    // Spreadsheet header
-    .k-spreadsheet > .k-tabstrip-wrapper {
-
-        .k-tabstrip-items-wrapper {
-            color: k-color(on-primary);
-            background-color: k-color(primary);
-        }
-        .k-tabstrip-items .k-item {
-            color: inherit;
-        }
-        .k-tabstrip-items .k-item.k-active::after {
-            border-color: k-color(on-primary);
-        }
-    }
-
-    // Quick access toolbar
-    .k-spreadsheet-quick-access-toolbar {
-        color: k-color(on-primary);
-        background-color: k-color(primary);
-    }
-
-    // Selection
-    .k-spreadsheet .k-selection-full,
-    .k-spreadsheet .k-selection-partial {
-        &::after { border-color: k-color(secondary); }
+    .k-spreadsheet-action-bar,
+    .k-spreadsheet-view {
+        background-color: k-color(surface-alt);
     }
 
 }

package/scss/spreadsheet/_variables.scss

@@ -21,7 +21,7 @@ $kendo-spreadsheet-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The background color of the Spreadsheet.
 /// @group spreadsheet
-$kendo-spreadsheet-bg: k-color(surface-alt) !default;
+$kendo-spreadsheet-bg: k-color(surface) !default;
 /// The text color of the Spreadsheet.
 /// @group spreadsheet
 $kendo-spreadsheet-text: k-color(on-app-surface) !default;
@@ -31,7 +31,7 @@ $kendo-spreadsheet-border: k-color(border) !default;
 
 /// The background color of the Spreadsheet header.
 /// @group spreadsheet
-$kendo-spreadsheet-header-bg: k-color(surface-alt) !default;
+$kendo-spreadsheet-header-bg: k-color(surface) !default;
 /// The text color of the Spreadsheet header.
 /// @group spreadsheet
 $kendo-spreadsheet-header-text: k-color(on-app-surface) !default;
@@ -101,7 +101,7 @@ $kendo-spreadsheet-view-font-size: $kendo-spreadsheet-font-size !default;
 
 /// The background color of the Spreadsheet selection.
 /// @group spreadsheet
-$kendo-spreadsheet-selection-bg: color-mix(in srgb, k-color(primary) 25%, transparent) !default;
+$kendo-spreadsheet-selection-bg: color-mix(in srgb, k-color(secondary-emphasis) 50%, transparent) !default;
 /// The text color of the Spreadsheet selection.
 /// @group spreadsheet
 $kendo-spreadsheet-selection-text: null !default;
@@ -124,11 +124,11 @@ $kendo-spreadsheet-single-selection-border: $kendo-spreadsheet-bg !default;
 
 /// The background color of the Spreadsheet partial selection.
 /// @group spreadsheet
-$kendo-spreadsheet-partial-selection-bg: rgba( black, .04 ) !default;
+$kendo-spreadsheet-partial-selection-bg: k-color(secondary) !default;
 
 /// The background color of the Spreadsheet active cell.
 /// @group spreadsheet
-$kendo-spreadsheet-active-cell-bg: k-color(surface-alt) !default;
+$kendo-spreadsheet-active-cell-bg: k-color(surface) !default;
 /// The shadow of the Spreadsheet active cell.
 /// @group spreadsheet
 $kendo-spreadsheet-active-cell-shadow: inset 0 0 0 1px k-color(primary) !default;
@@ -229,7 +229,7 @@ $kendo-spreadsheet-insert-image-dialog-preview-overlay-shadow: inset 0 0 0 2000p
 $kendo-spreadsheet-insert-image-dialog-preview-overlay-border-radius: k-border-radius(md) !default;
 /// The text color of the hovered Spreadsheet image Dialog preview.
 /// @group spreadsheet
-$kendo-spreadsheet-insert-image-dialog-overlay-hover-text: k-color(surface-alt) !default;
+$kendo-spreadsheet-insert-image-dialog-overlay-hover-text: k-color(surface) !default;
 
 /// The width of the Spreadsheet drawing handle.
 /// @group spreadsheet
@@ -275,7 +275,7 @@ $kendo-spreadsheet-dropzone-spacing-y: k-spacing(2) !default;
 /// @group spreadsheet
 $kendo-spreadsheet-filter-padding: k-spacing(1) !default;
 
-$kendo-spreadsheet-filter-menu-link-padding-x: calc( #{$kendo-icon-size} + calc( 2 * #{k-spacing(1)} ) ) !default;
+$kendo-spreadsheet-filter-menu-link-padding-x: calc( #{$kendo-icon-size} + k-spacing(2) ) !default;
 
 $kendo-spreadsheet-filter-menu-icon-margin: 0 k-spacing(1) 0 calc(-1 * ( #{$kendo-icon-size} + #{k-spacing(1)} ) ) !default;
 

package/scss/stepper/_layout.scss

@@ -1,4 +1,5 @@
 @use "@progress/kendo-theme-core/scss/components/stepper/_layout.scss" as *;
+@use "./variables.scss" as *;
 
 
 @mixin kendo-stepper--layout() {
@@ -8,11 +9,24 @@
     // Stepper
     .k-stepper {}
 
+    .k-step-list-horizontal {
+        & ~ .k-progressbar {
+            top: calc( (#{$kendo-stepper-indicator-height} / 2  ) - (#{$kendo-stepper-progressbar-size} / 2 ) + $kendo-stepper-indicator-focus-offset ) ;
+        }
+    }
+
+
+    .k-step-list-vertical {
+        & ~ .k-progressbar {
+            left: calc( (#{$kendo-stepper-indicator-height} / 2  ) - (#{$kendo-stepper-progressbar-size} / 2 ) + $kendo-stepper-indicator-focus-offset ) ;
+        }
+    }
+
 
     // Selected step
     .k-step-current {
         .k-step-label {
-            font-weight: 400;
+            font-weight: var( --kendo-font-weight-semibold, 600 );
         }
     }
 

package/scss/stepper/_theme.scss

@@ -1,6 +1,14 @@
 @use "@progress/kendo-theme-core/scss/components/stepper/_theme.scss" as *;
+@use "../core/_index.scss" as *;
+@use "./variables.scss" as *;
 
 
 @mixin kendo-stepper--theme() {
     @include kendo-stepper--theme-base();
+
+    .k-stepper {
+        .k-step-label:only-child {
+            background-color: k-color(app-surface);
+        }
+    }
 }

package/scss/stepper/_variables.scss

@@ -46,7 +46,7 @@ $kendo-stepper-inline-content-padding-y: k-spacing(2.5) !default;
 $kendo-stepper-font-size: var( --kendo-font-size, inherit ) !default;
 // The line height of the Stepper.
 /// @group stepper
-$kendo-stepper-line-height: math.div( 20, 14 ) !default;
+$kendo-stepper-line-height: var( --kendo-line-height, inherit ) !default;
 // The font family of the Stepper.
 /// @group stepper
 $kendo-stepper-font-family: var( --kendo-font-family, inherit ) !default;
@@ -89,17 +89,17 @@ $kendo-stepper-indicator-focus-calc-offset: calc( #{$kendo-stepper-indicator-foc
 
 /// The background color of the Stepper indicator.
 /// @group stepper
-$kendo-stepper-indicator-bg: k-color(surface-alt) !default;
+$kendo-stepper-indicator-bg: k-color(primary-subtle) !default;
 /// The text color of the Stepper indicator.
 /// @group stepper
-$kendo-stepper-indicator-text: k-color(on-app-surface) !default;
+$kendo-stepper-indicator-text: k-color(primary-on-subtle) !default;
 /// The border color of the Stepper indicator.
 /// @group stepper
-$kendo-stepper-indicator-border: k-color(border) !default;
+$kendo-stepper-indicator-border: k-color(primary-emphasis) !default;
 
 /// The background color of the hovered Stepper indicator.
 /// @group stepper
-$kendo-stepper-indicator-hover-bg: k-color(base-hover) !default;
+$kendo-stepper-indicator-hover-bg: k-color(primary-subtle-hover) !default;
 /// The text color of the hovered Stepper indicator.
 /// @group stepper
 $kendo-stepper-indicator-hover-text: null !default;
@@ -109,13 +109,13 @@ $kendo-stepper-indicator-hover-border: null !default;
 
 /// The background color of the disabled Stepper indicator.
 /// @group stepper
-$kendo-stepper-indicator-disabled-bg: null !default;
+$kendo-stepper-indicator-disabled-bg: color-mix(in srgb, k-color(primary-subtle), k-color(surface)) !default;
 /// The text color of the disabled Stepper indicator.
 /// @group stepper
-$kendo-stepper-indicator-disabled-text: color-mix(in srgb, k-color(on-app-surface) 32%, transparent) !default;
+$kendo-stepper-indicator-disabled-text: color-mix(in srgb, $kendo-stepper-indicator-text 38%, transparent) !default;
 /// The border color of the disabled Stepper indicator.
 /// @group stepper
-$kendo-stepper-indicator-disabled-border: null !default;
+$kendo-stepper-indicator-disabled-border: color-mix(in srgb, $kendo-stepper-indicator-border 38%, transparent) !default;
 
 /// The background color of the Stepper's done indicator.
 /// @group stepper
@@ -139,7 +139,7 @@ $kendo-stepper-indicator-done-hover-border: null !default;
 
 /// The background color of the Stepper's disabled done indicator.
 /// @group stepper
-$kendo-stepper-indicator-done-disabled-bg: color-mix(in srgb, k-color(primary) 60%, transparent) !default;
+$kendo-stepper-indicator-done-disabled-bg: color-mix(in srgb, k-color(primary) 38%, transparent) !default;
 /// The text color of the Stepper's disabled done indicator.
 /// @group stepper
 $kendo-stepper-indicator-done-disabled-text: k-color(on-primary) !default;
@@ -155,7 +155,7 @@ $kendo-stepper-indicator-current-bg: $kendo-stepper-indicator-done-bg !default;
 $kendo-stepper-indicator-current-text: $kendo-stepper-indicator-done-text !default;
 /// The border color of the Stepper current indicator.
 /// @group stepper
-$kendo-stepper-indicator-current-border: $kendo-stepper-indicator-done-border !default;
+$kendo-stepper-indicator-current-border: k-color(primary) !default;
 
 /// The background color of the Stepper's hovered current indicator.
 /// @group stepper
@@ -188,10 +188,10 @@ $kendo-stepper-label-success-text: k-color(success) !default;
 $kendo-stepper-label-error-text: k-color(error) !default;
 /// The text color of the hovered Stepper label.
 /// @group stepper
-$kendo-stepper-label-hover-text: unset !default;
+$kendo-stepper-label-hover-text: inherit !default;
 /// The text color of the disabled Stepper label.
 /// @group stepper
-$kendo-stepper-label-disabled-text: color-mix(in srgb, k-color(on-app-surface) 32%, transparent) !default;
+$kendo-stepper-label-disabled-text: color-mix(in srgb, k-color(on-app-surface) 38%, transparent) !default;
 
 /// The text color of the optional Stepper label.
 /// @group stepper
@@ -208,7 +208,7 @@ $kendo-stepper-optional-label-font-style: unset !default;
 
 /// The size of the Stepper ProgressBar.
 /// @group stepper
-$kendo-stepper-progressbar-size: 2px !default;
+$kendo-stepper-progressbar-size: 4px !default;
 /// The background color of the Stepper ProgressBar.
 /// @group stepper
 $kendo-stepper-progressbar-bg: null !default;

package/scss/switch/_layout.scss

@@ -1,6 +1,7 @@
+@use "sass:map";
+@use "./variables.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/switch/_layout.scss" as *;
 
-
 @mixin kendo-switch--layout() {
 
     @include kendo-switch--layout-base();
@@ -11,8 +12,6 @@
         // Thumb ripple
         .k-switch-thumb::before {
             content: "";
-            width: 200%;
-            height: 200%;
             border-radius: 100%;
             display: none;
             opacity: 0;
@@ -29,7 +28,7 @@
         &.k-hover {
             .k-switch-thumb::before {
                 display: block;
-                opacity: .04;
+                opacity: .08;
             }
         }
 
@@ -38,8 +37,24 @@
         &.k-focus {
             .k-switch-thumb::before {
                 display: block;
-                opacity: .12;
+                opacity: .2;
             }
         }
+
+        &:disabled,
+        &.k-disabled {
+            opacity: 1;
+        }
+    }
+
+    // Switch sizes
+    @each $size, $size-props in $kendo-switch-sizes {
+
+        $_thumb-indicator-size: map.get( $size-props, thumb-indicator-size );
+
+        .k-switch-#{$size} .k-switch-thumb::before {
+            width: $_thumb-indicator-size;
+            height: $_thumb-indicator-size;
+        }
     }
 }

package/scss/switch/_theme.scss

@@ -9,16 +9,9 @@
     // Switch
     .k-switch {
 
-        .k-switch-thumb {
-            box-shadow: k-elevation(2);
-        }
-
         // Thumb ripple
-        &.k-switch-on .k-switch-thumb::before {
-            background-color: inherit;
-        }
-        &.k-switch-off .k-switch-thumb::before {
-            background-color: k-color(on-app-surface);
+        .k-switch-thumb::before {
+            background-color: k-color(primary);
         }
     }
 

package/scss/switch/_variables.scss

@@ -8,7 +8,7 @@ $kendo-switch-font-family: null !default;
 
 /// The border width of the Switch track.
 /// @group switch
-$kendo-switch-track-border-width: 0px !default;
+$kendo-switch-track-border-width: 2px !default;
 
 /// The border width of the Switch thumb.
 /// @group switch
@@ -25,20 +25,20 @@ $kendo-switch-label-display: none !default;
 /// The map with the different Switch sizes.
 /// @group switch
 $kendo-switch-sizes: (
-    sm: ( font-size: null, track-width: 26px, track-height:  12px, thumb-width: 16px, thumb-height: 16px, thumb-offset: -2px, label-offset: 0px ),
-    md: ( font-size: null, track-width: 32px, track-height:  14px, thumb-width: 20px, thumb-height: 20px, thumb-offset: -3px, label-offset: 0px ),
-    lg: ( font-size: null, track-width: 38px, track-height:  16px, thumb-width: 24px, thumb-height: 24px, thumb-offset: -4px, label-offset: 0px )
+    sm: ( font-size: null, track-width: 52px, track-height:  28px, thumb-width: 20px, thumb-height: 20px, thumb-offset: 4px, label-offset: 0px, thumb-indicator-size: 36px ),
+    md: ( font-size: null, track-width: 52px, track-height:  32px, thumb-width: 24px, thumb-height: 24px, thumb-offset: 4px, label-offset: 0px, thumb-indicator-size: 40px ),
+    lg: ( font-size: null, track-width: 60px, track-height:  36px, thumb-width: 28px, thumb-height: 28px, thumb-offset: 4px, label-offset: 0px, thumb-indicator-size: 44px )
 ) !default;
 
 /// The background of the track when the Switch is not checked.
 /// @group switch
-$kendo-switch-off-track-bg: color-mix(in srgb, k-color(on-app-surface) 38%, transparent) !default;
+$kendo-switch-off-track-bg: k-color(base) !default;
 /// The text color of the track when the Switch is not checked.
 /// @group switch
 $kendo-switch-off-track-text: unset !default;
 /// The border color of the track when the Switch is not checked
 /// @group switch
-$kendo-switch-off-track-border: unset !default;
+$kendo-switch-off-track-border: k-color(base-emphasis) !default;
 /// The background gradient of the track when the Switch is not checked.
 /// @group switch
 $kendo-switch-off-track-gradient: null !default;
@@ -74,20 +74,20 @@ $kendo-switch-off-track-focus-ring: unset !default;
 
 /// The background of the track when the disabled Switch is not checked.
 /// @group switch
-$kendo-switch-off-track-disabled-bg: null !default;
+$kendo-switch-off-track-disabled-bg: color-mix(in srgb, k-color(base) 38%, transparent) !default;
 /// The text color of the track when the disabled Switch is not checked.
 /// @group switch
-$kendo-switch-off-track-disabled-text: null !default;
+$kendo-switch-off-track-disabled-text: color-mix(in srgb, k-color(on-app-surface) 38%, transparent) !default;
 /// The border color of the track when the disabled Switch is not checked.
 /// @group switch
-$kendo-switch-off-track-disabled-border: null !default;
+$kendo-switch-off-track-disabled-border: color-mix(in srgb, k-color(base-emphasis) 38%, transparent) !default;
 /// The background gradient of the track when the disabled Switch is not checked.
 /// @group switch
 $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: k-color(app-surface) !default;
+$kendo-switch-off-thumb-bg: k-color(base-emphasis) !default;
 /// The text color of the thumb when the Switch is not checked.
 /// @group switch
 $kendo-switch-off-thumb-text: unset !default;
@@ -111,16 +111,29 @@ $kendo-switch-off-thumb-hover-border: null !default;
 /// @group switch
 $kendo-switch-off-thumb-hover-gradient: null !default;
 
+/// The background of the thumb when the disabled Switch is not checked.
+/// @group switch
+$kendo-switch-off-thumb-disabled-bg: color-mix(in srgb, k-color(base-emphasis) 38%, transparent) !default;
+/// The text color of the thumb when the disabled Switch is not checked.
+/// @group switch
+$kendo-switch-off-thumb-disabled-text: null !default;
+/// The border color of the thumb when the disabled Switch is not checked.
+/// @group switch
+$kendo-switch-off-thumb-disabled-border: null !default;
+/// The background gradient of the thumb when the disabled Switch is not checked.
+/// @group switch
+$kendo-switch-off-thumb-disabled-gradient: null !default;
+
 
 /// The background of the track when the Switch is checked.
 /// @group switch
-$kendo-switch-on-track-bg: color-mix(in srgb, k-color(primary) 44%, transparent) !default;
+$kendo-switch-on-track-bg: k-color(primary) !default;
 /// The text color of the track when the Switch is checked.
 /// @group switch
 $kendo-switch-on-track-text: unset !default;
 /// The border color of the track when the Switch is checked.
 /// @group switch
-$kendo-switch-on-track-border: unset !default;
+$kendo-switch-on-track-border: k-color(primary) !default;
 /// The background gradient of the track when the Switch is checked.
 /// @group switch
 $kendo-switch-on-track-gradient: null !default;
@@ -156,20 +169,20 @@ $kendo-switch-on-track-focus-ring: unset !default;
 
 /// The background of the track when the disabled Switch is checked.
 /// @group switch
-$kendo-switch-on-track-disabled-bg: null !default;
+$kendo-switch-on-track-disabled-bg: color-mix(in srgb, k-color(on-app-surface) 12%, transparent) !default;
 /// The text color of the track when the disabled Switch is checked.
 /// @group switch
 $kendo-switch-on-track-disabled-text: null !default;
 /// The border color of the track when the disabled Switch is checked.
 /// @group switch
-$kendo-switch-on-track-disabled-border: null !default;
+$kendo-switch-on-track-disabled-border: transparent !default;
 /// The background gradient of the track when the disabled Switch is checked.
 /// @group switch
 $kendo-switch-on-track-disabled-gradient: null !default;
 
 /// The background of the thumb when the Switch is checked.
 /// @group switch
-$kendo-switch-on-thumb-bg: k-color(primary) !default;
+$kendo-switch-on-thumb-bg: k-color(primary-subtle) !default;
 /// The text color of the thumb when the Switch is checked.
 /// @group switch
 $kendo-switch-on-thumb-text: unset !default;
@@ -193,6 +206,19 @@ $kendo-switch-on-thumb-hover-border: null !default;
 /// @group switch
 $kendo-switch-on-thumb-hover-gradient: null !default;
 
+/// The background of the thumb when the disabled Switch is checked.
+/// @group switch
+$kendo-switch-on-thumb-disabled-bg: k-color(app-surface) !default;
+/// The text color of the thumb when the disabled Switch is checked.
+/// @group switch
+$kendo-switch-on-thumb-disabled-text: null !default;
+/// The border color of the thumb when the disabled Switch is checked.
+/// @group switch
+$kendo-switch-on-thumb-disabled-border: null !default;
+/// The background gradient of the thumb when the disabled Switch is checked.
+/// @group switch
+$kendo-switch-on-thumb-disabled-gradient: null !default;
+
 @forward "@progress/kendo-theme-core/scss/components/switch/_variables.scss" with (
     $kendo-switch-font-family: $kendo-switch-font-family,
     $kendo-switch-track-border-width: $kendo-switch-track-border-width,
@@ -225,6 +251,10 @@ $kendo-switch-on-thumb-hover-gradient: null !default;
     $kendo-switch-off-thumb-hover-text: $kendo-switch-off-thumb-hover-text,
     $kendo-switch-off-thumb-hover-border: $kendo-switch-off-thumb-hover-border,
     $kendo-switch-off-thumb-hover-gradient: $kendo-switch-off-thumb-hover-gradient,
+    $kendo-switch-off-thumb-disabled-bg: $kendo-switch-off-thumb-disabled-bg,
+    $kendo-switch-off-thumb-disabled-text: $kendo-switch-off-thumb-disabled-text,
+    $kendo-switch-off-thumb-disabled-border: $kendo-switch-off-track-disabled-border,
+    $kendo-switch-off-thumb-disabled-gradient: $kendo-switch-off-thumb-disabled-gradient,
     $kendo-switch-on-track-bg: $kendo-switch-on-track-bg,
     $kendo-switch-on-track-text: $kendo-switch-on-track-text,
     $kendo-switch-on-track-border: $kendo-switch-on-track-border,
@@ -249,5 +279,9 @@ $kendo-switch-on-thumb-hover-gradient: null !default;
     $kendo-switch-on-thumb-hover-bg: $kendo-switch-on-thumb-hover-bg,
     $kendo-switch-on-thumb-hover-text: $kendo-switch-on-thumb-hover-text,
     $kendo-switch-on-thumb-hover-border: $kendo-switch-on-thumb-hover-border,
-    $kendo-switch-on-thumb-hover-gradient: $kendo-switch-on-thumb-hover-gradient
+    $kendo-switch-on-thumb-hover-gradient: $kendo-switch-on-thumb-hover-gradient,
+    $kendo-switch-on-thumb-disabled-bg: $kendo-switch-on-thumb-disabled-bg,
+    $kendo-switch-on-thumb-disabled-text: $kendo-switch-on-thumb-disabled-text,
+    $kendo-switch-on-thumb-disabled-border: $kendo-switch-on-track-disabled-border,
+    $kendo-switch-on-thumb-disabled-gradient: $kendo-switch-on-thumb-disabled-gradient,
 );

package/scss/table/_layout.scss

@@ -6,6 +6,12 @@
     @include kendo-table--layout-base();
 
     .k-table {
+
+        th,
+        .k-table-th{
+            font-weight: var( --kendo-font-weight-semibold, 600 );
+        }
+
         td:focus,
         td.k-focus,
         th:focus,

package/scss/table/_variables.scss

@@ -31,14 +31,14 @@ $kendo-table-cell-padding-x: null !default;
 /// @group table
 $kendo-table-cell-padding-y: null !default;
 
-$kendo-table-sm-cell-padding-x: k-spacing(2.5) !default;
-$kendo-table-sm-cell-padding-y: k-spacing(1) !default;
+$kendo-table-sm-cell-padding-x: k-spacing(2) !default;
+$kendo-table-sm-cell-padding-y: k-spacing(2) !default;
 
-$kendo-table-md-cell-padding-x: k-spacing(6) !default;
-$kendo-table-md-cell-padding-y: k-spacing(2.5) !default;
+$kendo-table-md-cell-padding-x: k-spacing(3) !default;
+$kendo-table-md-cell-padding-y: k-spacing(3) !default;
 
-$kendo-table-lg-cell-padding-x: k-spacing(6) !default;
-$kendo-table-lg-cell-padding-y: k-spacing(2.5) !default;
+$kendo-table-lg-cell-padding-x: k-spacing(4) !default;
+$kendo-table-lg-cell-padding-y: k-spacing(4) !default;
 
 /// The sizes of the table.
 /// @group table
@@ -77,10 +77,10 @@ $kendo-table-border: k-color(border) !default;
 
 /// Background color of table headers.
 /// @group table
-$kendo-table-header-bg: $kendo-table-bg !default;
+$kendo-table-header-bg: k-color(surface) !default;
 /// Text color of table headers.
 /// @group table
-$kendo-table-header-text: k-color(subtle) !default;
+$kendo-table-header-text: k-color(on-app-surface) !default;
 /// Border color of table headers.
 /// @group table
 $kendo-table-header-border: $kendo-table-border !default;
@@ -149,7 +149,7 @@ $kendo-table-focus-shadow: $kendo-list-item-focus-shadow !default;
 
 /// Background color of selected rows in table.
 /// @group table
-$kendo-table-selected-bg: color-mix(in srgb, k-color(primary) 12%, transparent) !default;
+$kendo-table-selected-bg: color-mix(in srgb, k-color(primary) 20%, transparent) !default;
 /// Text color of selected rows in table.
 /// @group table
 $kendo-table-selected-text: null !default;